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

<!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>


你可能感兴趣的:(css2D特效tranform——文字折叠效果)