- 主要用偽元素rotateY,skew造成剪紙效果，context: data-text;這個屬性很少用到，就算不用偽元素也是可以用span或其他標簽定位實現(xiàn)，思維打開些
<!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>
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
