变形 3D效果

box的动画不会影响到box2
/*位移*/
transform: translate(50px,50px);
/*沿Z轴旋转360度*/
transform: rotate(360deg);
/*缩放*/
transform: scale(0.5,0.2);
/*斜切*/
transform: skew(45deg,0);
transform: skew(0,45deg);
/*设置变形的中心点*/
transform-origin: left center;
transform-origin: left top;
transform-origin: 50px 50px;

旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向
3.默认沿Z轴旋转

设置3D效果：(3D旋转)
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);