經過兩個周的前端課程，已經從一個H5和CSS的前端小白漸漸進階了一點點

　　從開始的靜態效果，到了簡單的動態效果，從2D的展示也到了3D的展示

    <style>
        #box{
            width: 475px;
            height: 308px;
            border: 5px solid red;
            margin: 100px auto 0;
            overflow: hidden;
        }
        #box>img{
            width
 
: 100%;
            height: 100%;
            transition: all .5s;                  /*中間為要變化的屬性 all/transform*/
        }
        #box>img:hover{
            transform: scale(1.2);
        }
    </style>

　　就此實現了一個小小的放大動態效果，使本身更加完整，雖然簡單，但是也是接觸CSS動態的第一步。

　　再慢慢往下，就是一個簡單的3D效果，寫了平面，同過給他們調整平移翻轉的位置，再給整體加上一個反轉效果，就能看到了一個正方體的轉動。

    <style>
        @keyframes zhuan {
            from{transform: rotateY(0);}
            50%{transform: rotateY(180deg) rotateX(30deg)}
            to{transform: rotateY(360deg)}
        }
        #box{
            width: 300px;
            height: 300px;
            /*border: 1px solid red;*/
            margin
 
:100px auto 0;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
            animation: zhuan 5s linear infinite;
            transform-style: preserve-3d;
        }
        #box>div{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
        }
        #box>div:nth-child(1){background: green;transform: translateZ(150px)}
        #box>div:nth-child(2){background: blue; transform: translateZ(-150px) rotateY(180deg)}
        #box>div:nth-child(3){background: yellow;transform: translateX(-150px) rotateY(-90deg)}
        #box>div:nth-child(4){background: pink;transform: translateX(150px) rotateY(90deg)}
        #box>div:nth-child(5){background: orange;transform: translateY(-150px) rotateX(90deg)}
        #box>div:nth-child(6){background: lightblue;transform: translateY(150px) rotateX(-90deg)}
    </style>

　　以上差不多就是最近所學的一點記錄