立体文字翻动效果代码

body{
            background-color: #eee;
        }
        .box{
            width: 500px;
            margin: 100px auto;
        }
        .box span{
            float: left;
            width: 100px;
            height: 100px;
            font-size:80px ;
            line-height: 100px;
            text-align: center;
            font-family: "微软雅黑";        
            position: relative;    
        }
        span::before,span::after{
            /*通过为元素获取自定义的值*/
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 0;
            float: left;
            width: 100px;
            height: 100px;
            font-size:80px ;
            line-height: 100px;
            text-align: center;
            font-family: "微软雅黑";
            color: #fff;
            transform: scale(0.95,1);
            /*变换中心*/
            transform-origin:left ;
            /*过渡*/
            transition:all 0.5s;
        }
        span::before{
            color:rgba(0,0,0,0.3);
        }
        .box:hover span::after{
            /*skew(0deg,5deg)//倾斜*/
            color: #fff;
            transform: rotateY(25deg) skew(0deg,5deg);
        }

 

<div class="box">
            <span data-text="传">传</span>
            <span data-text="智">智</span>
            <span data-text="播">播</span>
            <span data-text="客">客</span>
        </div>

 

 

                                                    本文属于学习笔记，不做商业用途