首页 /  web前端 /  css3 / 3D翻转文字

0 25

3D翻转文字

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3D翻转文字</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #cccccc;
        }
        .box{
            width: 600px;
            margin: 100px auto;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 100px;
            font-size: 100px;
            font-family: 'microsoft yahei';
            margin-right: 40px;
            float: left;
            position: relative;
        }

        span::before,
        span::after{
            content:attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            color: rgba(0,0,0,.3);
            transform-origin: left center;
            transform: scale(0.95,1);
            transition: transform 0.5s;

        }
        span::after{
            color: #ffffff;
        }

        div:hover span::after{
            transform: rotateY(40deg) skew(0deg,10deg) scale(0.95,1);
        }
        div:hover span::before{
            transform: skew(0deg,25deg) scale(0.95,1);
        }
    </style>
</head>
<body>
        <div class="box">
            <span data-text="前">前</span>
            <span data-text="端">端</span>
            <span data-text="笔">笔</span>
            <span data-text="记">记</span>
        </div>
</body>
</html>

[来源] https://www.qdfuns.com

[声明] 本站资源来自用户分享,如损害你的权益请联系客服QQ:120074275给予处理。

添加一条新回复
容若 2019-09-05 12:04
10
送花
20积分一朵