day01（2017.9.20）

3D旋转

//html

    
    
知海匠库
    
互  联  网  匠  人  孵  化  连  锁  品  牌
    

//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）