css2D特效tranform——文字折叠效果

浏览数：30 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
body{
 background: #34c4e6;   
}
p{
    color: aliceblue;
    font-family: "微软雅黑";
    font-size: 8em;;
    font-weight: bold;
    text-align: center;
    
}
p span{position: relative;}
p span:before{
   content: attr(data-text); 
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #34c4e6;
    transform-origin: left top;
    transform:rotateY(-40deg);
    text-shadow: 1px 1px 0 #34869a;
    z-index: 2;

}
p span:hover::before{
    color: #34c4e6;
    transform:rotateY(0);
}

p span:after{
   content: attr(data-text); 
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    color:rgba(0,0,0,0.2);
    transform-origin: left top;
    transform:skew(0deg,20deg);

}
p span:hover::after{
    color: #684da3;
    transform:rotateY(0);
}
   
</style>
<body>
    <p>
        <span data-text="郭">郭</span>
        <span data-text="垒">垒</span>
        <span data-text="好">好</span>
    </p>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。