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

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使用