一、2D 变换

1. 2D 位移

/* x 轴方向位移 30px */
transform: translateX(30px);
/* 分别设置 x 轴与 y 轴的位移 */
transform: translateX(30px) translateY(40px);
/* 同时设置 x 与 y 的方向位移 */
transform: translate(-50%, -50%);

• 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
• 与相对定位的区别：相对定位的百分比值，参考的是其父元素；位移的百分比值，参考的是其自身。
• 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
• 位移对行内元素无效。

位移配合定位，可实现元素水平垂直居中：

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 2D 旋转

设置旋转角度，需指定一个角度值（deg），正值顺时针，负值逆时针。

/* 顺时针旋转 30 度 */
transform: rotate(30deg);
/* 逆时针旋转 30 度 */
transform: rotate(-30deg);

3. 2D 缩放

设置水平或垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。

/* 水平方向放到两倍 */
transform: scaleX(2);
/* 垂直方向缩小到 0.5 倍 */
transform: scaleY(0.5);

/* 同时设置水平方向、垂直方向的缩放比例 */
/* 一个值代表同时设置水平和垂直缩放 */
transform: scale(0.5);
/* 两个值分别代表：水平缩放、垂直缩放 */
transform: scale(2, 3);

借助缩放，可实现小于 12px 的文字。

4. 2D 扭曲

/* 设置元素在水平方向扭曲，值为角度值，
会将元素的左上角、右下角拉扯 */
transform: skewX(30deg);
/* 设置元素在垂直方向扭曲 */
transform: skewY(20deg);
/* 同时设置水平与垂直方向扭曲 */
transform: skew(30deg, 20deg);

5. 修改变换原点

• 元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
• 修改变换原点对位移没有影响， 对旋转和缩放会产生影响。
• 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
• 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50%；若是关键词，则另一个坐标取 50%。

/* 变换原点在元素的中心位置，百分比是相对于自身。默认值 */
transform-origin: 50% 50%;
/* 变换原点在元素的左上角 */
transform-origin: left top;
/* 变换原点距离元素左上角 50px 50px 的位置 */
transform-origin: 50px 50px;
/* 只写一个值的时候，第二个值默认为 50% */
transform-origin: 0;

6. 多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: translate(-50%, -50%) rotate(45deg);

二、3D 变换

重要原则：元素进行 3D 变换的首要操作是，父元素必须开启 3D 空间!

/* 让子元素位于此元素的二维平面内（2D 空间），默认值 */
transform-style: flat;
/* 让子元素位于此元素的三维空间内（3D 空间） */
transform-style: preserve-3d;

1. 设置景深

指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立体。

/* 不指定透视，默认值 */
perspective: none;
/* 指定观察者距离 z=0 平面的距离，不允许负值 */
perspective: 100px;

perspective 设置给发生 3D 变换元素的父元素。

2. 透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。

/* 相对坐标轴往右偏移 400px， 往下偏移 300px */
perspective-origin: 400px 300px;
perspective-origin: center;
perspective-origin: bottom right;
perspective-origin: 500% 200%;

设置给发生 3D 变换元素的父元素。

3. 3D 位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移。

/* 设置 z 轴位移，需指定长度值，
正值向屏幕外，负值向屏幕里，且不能写百分比 */
transform: translateZ(50px);
/* 第 1 个参数对应 x 轴，第 2 个参数对应 y 轴，
第 3 个参数对应 z 轴，且均不能省略。*/
transform: translate3d(100px, 200px, 300px);

4. 3D 旋转

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转。

/* 设置 x 轴旋转角度，需指定一个角度值(deg) */
transform: rotateX(20deg);
/* 设置 y 轴旋转角度，需指定一个角度值(deg) */
transform: rotateY(20deg);
/* 前 3 个参数分别为 x,y,z 方向的矢量(0~1)，
原点到该点的连线即为旋转轴，
第 4 个参数表示旋转的角度 */
transform: rotate3d(1, 1, 1, 30deg)

5. 3D 缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放。

/* 设置 z 轴方向的缩放比例 */
transform: scaleZ(4);
/* 分别设置 x,y,z 轴的缩放比例，参数不允许省略 */
transform: scale3d(2, 3, 4);

6. 修改变换原点

/* 变换原点在元素的中心位置，百分比是相对于自身。默认值 */
transform-origin: 50% 50% 0;
transform-origin: 50% 50% 30px;

7. 设置元素背面可见性

backface-visibility 需要加在发生 3D 变换元素的自身上。

/* 指定元素背面可见，允许显示正面的镜像。默认值 */
backface-visibility: visible;
/* 指定元素背面不可见 */
backface-visibility: hidden;

8. 3D 变换示例

  
1
  
2
  
3
  
4
  
5
  
6

.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 300px;
  perspective-origin: 150% 150%;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;

  backface-visibility: visible;
}

.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}
.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

三、过渡

• transition-property：定义哪个属性需要过渡，只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡效果。
• transition-duration：设置过渡的持续时间。
• transition-delay：指定开始过渡的延迟时间。
• transition-timing-function：设置过渡的类型。
• transition：过渡复合属性。

/* 不过渡任何属性 */
transition-property: none;
/* 过渡所有能过渡的属性 */
transition-property: all;
/* 过渡具体的属性 */
transition-property: width, heigth;

/* 没有任何过渡时间，默认值 */
transition-duration: 0;
/* 过渡时间为 1s */
transition-duration: 1s;
/* 过渡时间为 500ms */
transition-duration: 500ms;
/* 不同的属性设置不同的过渡时间 */
transition-property: width, height, opacity;
transition-duration: 0.5s, 1s, 0.3s;

/* 设置开始过渡的延迟时间 */
transition-delay: 1s;

/* 平滑过渡，默认值 */
transition-timing-function: ease;
/* 匀速过渡 */
transition-timing-function: linear;
/* 加速过渡 */
transition-timing-function: ease-in;
/* 减速过渡 */
transition-timing-function: ease-out;
/* 先加速再减速过渡 */
transition-timing-function: ease-in-out;
/* 自定义的贝塞尔曲线函数 */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

/* 通过复合属性设置过渡，第一是 duration，第二个是
delay，其他值没有顺序要求。*/
transition:1s 1s linear all;
/* 分别设置不同属性的过渡 */
transition: width 2s, height 2s, transform 2s;

在线制作贝赛尔曲线：https://cubic-bezier.com/

四、动画

1. 定义动画及关键帧

/* 简单方式定义动画及关键帧 */
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

/* 完整方式定义动画及关键帧 */
@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

2. 元素应用动画

• animation-name：给元素指定具体的动画
• animation-duration：设置动画所需时间
• animation-delay：设置动画延迟
• animation-timing-function：设置动画的类型，同过渡
• animation-iteration-count：指定动画的播放次数
• animation-direction：指定动画方向
• animation-fill-mode：设置动画之外的状态
• animation-play-state：设置动画的播放状态
• animation：动画复合属性

/* 指定动画 */
animation-name: testKey; 
/* 设置动画所需时间 */ 
animation-duration: 5s; 
/* 设置动画延迟 */ 
animation-delay: 0.5s;

/* 播放指定次数 */
animation-iteration-count: 3;
/* 无限循环播放 */
animation-iteration-count: infinite;

/* 设置动画方向，正常方向 (默认) */
animation-direction: normal;
/* 设置动画方向，反方向运行 */
animation-direction: reverse;
/* 设置动画方向，动画先正常运行再反方向运行，并持续交替运行 */
animation-direction: alternate;
/* 设置动画方向，动画先反运行再正方向运行，并持续交替运行 */
animation-direction: alternate-reverse;

/* 设置对象状态为动画结束时的状态 */
animation-fill-mode: forwards;
/* 设置对象状态为动画开始时的状态 */
animation-fill-mode: backwards;

/* 设置动画的播放状态, 运动 (默认) */
animation-play-state: running;
/* 设置动画的播放状态, 暂停 */
animation-play-state: paused;

/* 动画复合属性 */
animation: testKey 3s 0.5s linear 2 alternate-reverse forwards;