- 主要用伪元素rotateY,skew造成剪纸效果，context: data-text;这个属性很少用到，就算不用伪元素也是可以用span或其他标签定位实现，思维打开些
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 3D转换</title>
<style>
body {
margin: 0;
padding: 0;
font-family: '微软雅黑';
background-color: #F7F7F7;
}
.text-box {
margin-top: 100px;
text-align: center;
line-height: 1;
font-size: 100px;
color: #065DAC;
}
.text-box span {
display: inline-block;
position: relative;
}
span::before, span::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
transform-origin: left center;
transition: all 0.4s;
}
span::before {
transform: rotateY(-20deg);
color: tomato;
z-index: 3;
}
span::after {
z-index: 2;
color: rgba(0, 0, 0, 0.4);
}
.text-box:hover span::before {
transform: rotateY(-40deg);
}
.text-box:hover span::after {
transform: skew(0, 20deg);
}
</style>
</head>
<body>
<div class="text-box">
<span data-text="前">前</span>
<span data-text="端">端</span>
<span data-text="进">进</span>
<span data-text="阶">阶</span>
</div>
</body>
</html>
