day01（2017.9.20）

3D旋转

//html
<div class="logo">
    <a href="">
    <h1>知海匠库</h1>
    <p>互 &nbsp联 &nbsp网 &nbsp匠 &nbsp人 &nbsp孵 &nbsp化 &nbsp连 &nbsp锁 &nbsp品 &nbsp牌</p>
    </a>
</div>

//css
*{
            margin: 0;
            padding: 0;
        }
        .logo{
            width: 300px;
            height: 120px;
            text-align: center;
            background: blue;
            border-radius: 10px;
            position: relative;
        }
        h1,p{
            color: white;
        }
        h1{
            width: 280px;
            font-size: 65px;
            margin-left: 10px;
            border-bottom: 5px solid white;
        }
        p{
            width: 280px;
            margin-left: 10px;
        }
        .logo:hover{
            transform: rotateY(30deg);    ///重要代码
            transition: all 2s;
        }

rotateX()绕X轴方向旋转
rotateY()绕Y轴方向旋转
rotateZ()绕Z轴方向旋转
rotate（x,y,z,angle）