前端（九）

1.变形

.box:hover{
            /*box的动画不会影响到box2*/
            /*位移*/
            transform: translate(50px,50px);
        }
        .box2:hover{
            /*沿Z轴旋转360度*/
            transform: rotate(360deg);
        }
        .box3:hover{
            /*缩放*/
            transform: scale(0.5,0.2);
        }
        .box4:hover{
            /*斜切*/
            /*transform: skew(45deg,0);*/
            transform: skew(0,45deg);
        }

2.变形中心点

运行结果：

image.png

3.背面可见 能翻动

    
    
    


    

        
div元素
    

运行结果：

image.png

image.png

4.动画作业

    
    
    


    

        

        

        

        

        

        
loading...
    

运行结果：

image.png

image.png