2D 3D 旋转 动画

transform设置变形

rotate表示旋转 deg表示旋转的角度，45deg表示顺时针旋转45度 -45deg表示逆时针旋转45度
transform: rotate(45deg);

transform-origin设置旋转基点，默认情况下是50% 50%
第一个参数设置x轴，第二个参数设置y轴
transform-origin: 100% 0;

translate设置平移变形，2个值分别是横向和纵向偏移量。值可以是百分比（是自身尺寸的百分之多少），也可以是具体尺寸
正值：在x轴向右，y轴向下
负值：在x轴向左，y轴向上
transform: translate(100%,100px);

scale设置缩放变形，2个值分别为横轴（x轴）和纵轴（y轴）的缩放量，值小于1，表示缩小，大于1，表示放大，值表示缩放自身的多少倍
transform: scale(1.5,1.5);

3D：
3d旋转，元素绕轴旋转后，x，y，z 轴 也会跟着旋转
注意：无论元素怎么转到， y轴 始终在高度方向上
x轴 始终在宽度上
z轴 始终与x和y轴垂直(你看不见)

perspective 透视（父元素）
没有透视，就看不到3d效果
perspective: 1000px;
/* 透明度 */
opacity: 0.4;
/设置3d空间/
transform-style: preserve-3d;

动画：
1：如果定义动画，定义动画是【未执行】的、
2：如何执行动画
3：怎么执行；执行时间；执行速度，迟延时间等…

注意：动画通常与过渡结合使用