CSS3D之實現動態字

思路：用::befor僞元素生成用於3D翻轉的字體

實現起來挺簡單的：

1. 新建5個div，每個div分別對應5個字體
2. 用::befor生成用於翻轉的字體，並用absolute，以及z-index控制生成字體的位置
3. 當元素被: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，但我的實現方式和他不同