2D、3D

2D

旋转变形rotate()

transform: rotate(45deg);
            /* 旋转角度 */

角度为正顺时针转

transform-origin

设置变换原点
默认值transform-origin: 50% 50%;绕图片中心转

 transform-origin: 0 0;
 /* 绕左上角旋转 */

缩放变形scale()

transform: scale(3);
   /* 数值小于1表示缩小元素,大于1表示放大元素 */

斜切变形skew()

transform: skew(10deg,20deg);
       /* x斜切角度y斜切角度*/

位移变形translate()

transform: translate (100px,200px);
      /* 向右移动 向下移动*/

和相对定位非常像，位移变形也会“老家留坑”“形影分离”

3D

3D旋转

绕横轴转

transform: rotateX(30deg);
/* 往里为正 */

绕纵轴旋

transform: rotateY(30deg);
/* 往里为正 */

perspective

定义透视强度，理解为“人眼到舞台的距离”
单位：px

<!-- 舞台,必须设置perspective属性 -->
 <div>
     <!-- 演员,设置transform属性 -->
     <p></p>
 </div>

空间移动

添加在3D旋转之后

transform: rotateY(30deg) translateX(30px) translateZ(100px);

制作正方体

正方体每个面都是从舞台经过不同的3D旋转、空间移动到自己的位置过渡

过渡

优点：动画更细腻，内存开销小
4个属性
transition:width 1s linear 0s;
/* 什么属性要过渡 动画时长、变化速度曲线、延迟时间 */

可参与过渡的属性

1）所有数值类型的属性
比如width、height、left、top、border-radius
2）背景颜色和文字颜色
3）所有变形（包括2D和3D）都能被过渡
4）all属性，所有属性都参与过渡

缓动效果

缓动参数
transition的第三个参数就是缓动参数，也是变化速度曲线
常见的缓动参数

贝塞尔曲线
网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数
3）过渡效果实战课