变形

transform:位移 旋转 缩放 斜切;
transition 过渡效果
transform: translate(X轴,Y轴);
translateX(偏移大小);
translateY(偏移大小);
translateY(50%);  移动自己高度的50%距离

注意

注意：偏移大小是像素大小，也可以是百分比
以后的动画移动全部都使用 transform，不要使用 margin 和 padding
移动动画的常见属性是： 定位的 left 和 top 以及 transform

缩放

transform: scale(倍数);

scale(2); 宽高放大 2 倍
scale(0.6); 宽高缩小到原来的 0.6 倍
scale(2,0.5); 宽度放大，高度缩小
scale(0); 缩小到 0 倍，就是看不见

旋转:

transform: rotate(30deg);

旋转中心点：

transform-origin: x轴 y轴;

top center 10px 20px;

斜切：

transform: skew(X轴度数, y轴度数);

2D 变形

transform: translate() rotate() scale() skew();
transform-origin: x轴 Y轴;
transition: all 0.4s;

3D 就是比 2D 多了 Z 轴。就多出来一个空间，这就是 3D 坐标系.

3D 旋转:

transform: rotateX(); /* 单杠 */
transform: rotateY(); /* 钢管 */
transform: rotateZ(); /* 羊肉串  默认就是z轴 */

如果想要做 3D 效果，那么需要给父元素添加

perspective: 1000px; /* 透视1000像素 */

3D 位移：

transform: translateX(100px) /* 水平方向移动 */ translateY(100px) /* 垂直方向移动 */ translateZ(100px); /* 放大缩小的效果(必须加perspective) */
transform: translate3D(x, y, z); /* 复合属性 */
transform: translate(x, y);