<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> 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: "Microsoft Yahei"; position: relative; } span::before,span::after{ /* 在css中通过伪元素来获取自定义属性的值 在JavaScript中使用box.dataset设置和获取自定义属性值 */ content: attr(data-text); position: absolute; left:0; top:0; width: 100px; height: 100px; font-size:80px; line-height: 100px; text-align: center; font-family: "Microsoft Yahei"; color:#fff; transform: scale(0.98,1); /*变换中心*/ transform-origin: left; /*过渡*/ transition: all 0.5s; } span::before{ color: rgba(0,0,0,0.4); }
.box:hover span::after{
/*这里-15deg是以左边为顺时针旋转中心转15度,但是由于角度没有未旋转前文字样式所表现的角度大,导致了
看上去好像是逆时针旋转*/ transform: rotateY(-15deg); } </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>