CSS平面转换、空间转换、动画

一、平面转换（transform）

1.平移

取值：

• 像素（px）
• 百分比（根据自身尺寸计算百分比）

写法：

div {
  transform: translate(100px, 50px);
  /* transform: translate(X轴移动距离, Y轴移动距离); */
}

注意
translate() 只写一个值，表示沿着X轴移动
单独设置X或Y轴移动距离：translateX()或translateY()

2.旋转

取值：角度单位是deg

写法：

div {
  transform: rotate(60deg);
  /* transform: rotate(旋转角度); */
}

注意

• 取值正负均可
• 取值为正，顺时针旋转
• 取值为负，逆时针旋转

3.改变转换原点（transform-origin）

取值	说明
像素（px）	如：transform-origin:100px 50px;
方位名词	如：transform-origin:right top;
百分比	如：transform-origin:50% 50%;

注意
默认情况下原点位于盒子中心

4.缩放

写法：

div {
  transform: scale(2);
  /* transform: scale(缩放倍数); */
  transform: scale(2,1);
  /* transform: scale(X轴缩放倍数, Y轴缩放倍数); */
}

注意

• 只为scale()设置一个值，表示X 轴和Y 轴等比例缩放
• 取值大于1表示放大，取值小于1表示缩小

5.倾斜

属性值	取值
skew()	角度（deg）

写法：

div {
  transform: skew(60deg);
  /* transform: skew(角度度数); */
}

6.渐变

（1）线性渐变

写法：

div {
  background-image: linear-gradient(
  to right，
  /* 方向（可以是to方位，也可以是角度 */
  transparent,
  /* 颜色1 */
  rgba(0, 0, 0, 0.6)
  /* 颜色2 */
  );  
}

（2）径向渐变

写法：

div {
  background-image: radial-gradient(
  10px at center center，
  /* 半径 at 圆心位置, */
  red 50%，
  /* 颜色1 终点位置, */
  pink
  /* 颜色2 终点位置 */
  ); 
}

注意
半径是两条就是椭圆
圆心取值范围可以是像素（px）、方位名词、百分比

二、空间转换（transform）

1.平移

写法：

div {
  transform: translate3d(x值, y值, z值);
  transform: translateX(x值);
  transform: translateY(y值);
  transform: translateZ(z值);
}

取值：

• 像素（px）
• 百分比（根据自身尺寸计算百分比）

注意
没有设置视距（perspective）情况下，Z轴平移没有效果
perspective: 视距;

2.旋转

写法：

div {
  transform: rotateZ(值);
  transform: rotateZ(值);
  transform: rotateZ(值);
}

取值：角度（deg）

3.立体呈现（transform-style）

属性值	说明
flat	子级处于平面中（默认值）
preserve-3d	子级处于3D 空间中

注意
transform-style:preserve-3d;是添加给父级的

4.缩放

写法：

div {
  transform: scale3d(x值, y值, z值);
  transform: scaleX(x值);
  transform: scaleY(y值);
  transform: scaleZ(z值);
}

三、动画（animation）

写法：

  animation: 动画名称 动画时长(s) 速度曲线 延迟时间(s) 重复次数 动画方向 执行完毕时状态 ;
  /* 
  速度曲线：steps(数字) 例如：逐帧动画
  重复次数：infinite为无限循环 
  动画方向：alternate为反向 
  执行完毕时状态：
  	forwards：最后一帧状态
    backwards：第一帧状态 
  */
  
  /* 写法一 */
  @keyframes 动画名称 {
  from {}
  to {}
  }

  /* 写法二 */
  @keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
  /* 以上百分比代表运行时间 */
  }

注意
动画名称和动画时长必须赋值
可以多组动画
例如：

div {
  animation: 
  动画名称1 动画时长1,
  动画名称2 动画时长2
 ;}

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用