近期CSS的一点进阶

　　经过两个周的前端课程，已经从一个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>

　　以上差不多就是最近所学的一点记录