思路:用::befor僞元素生成用於3D翻轉的字體
實現起來挺簡單的:
- 新建5個div,每個div分別對應5個字體
- 用::befor生成用於翻轉的字體,並用absolute,以及z-index控制生成字體的位置
- 當元素被:hover時,就進行3D翻轉
實現起來挺簡單的,下面直接上源碼:
<div id="warp">
<div data-descr="前">前</div>
<div data-descr="端">端</div>
<div data-descr="小">小</div>
<div data-descr="學">學</div>
<div data-descr="生">生</div>
</div>
<style>
#warp {
margin: 100px auto;
font-size: 80px;
color: #005aa0;
text-align: center;
}
#warp div {
display: inline-block;
width: 90px;
height: 100%;
position: relative;
}
#warp div[data-descr]::before {
content: attr(data-descr);
position: absolute;
top: 0;
text-shadow: 3px 2px 4px #005aa0;
color: white;
transform-origin: left;
transition: transform .5s;
z-index: 1;
}
#warp div[data-descr]:hover::before {
transform-origin: left;
transform: rotateY(-40deg) skewY(10deg);
}
</style>
上面也許會有陌生的屬性:
- 自定義數屬性 data-descr
- content:attr()
上面這兩個屬性呢,是可以和::before和::afterwwe僞元素搭配使用的,效果極佳
這是上面兩屬性詳細的文檔鏈接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after
靈感來自於這個博客:https://blog.csdn.net/iamcgt/article/details/72058711,但我的實現方式和他不同