变形、元素旋转、变形中心点

变形

元素旋转

• 默认沿Z轴旋转

transform: rotate(45deg);perspective

设置透视距离，经验数值800比较符合人眼的透视效果

transform: perspective(800px) rotateX(45deg);

.box{       
    width: 300px;       
    height: 300px;      
    background-color: gold;     
    margin: 50px auto 0;        
    transition: all 500ms ease;     
    /*设置盒子按3D空间显示*/     
    transform-style: preserve-3d;       
    transform: perspective(800px) rotateY(0deg);        
}       
.box:hover{     
    /*默认沿Z轴旋转*/     
    /*transform: rotate(45deg);*/       
    /*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/              
        /*transform: perspective(800px) rotateX(45deg);*/       
    transform: perspective(800px) rotateY(-45deg);      
}   

变形中心点