2D旋转与3D转换

---

一、2D转换

2D转换是改变标签在二维平面上的位置和形状

1.移动： translate

2D的移动主要是指 水平、垂直方向上的移动

transform: translate(x, y)

知识要点

• translate 最大的优点就是不影响其他元素的位置
• translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
• 行内标签没有效果

2.旋转： rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

      transform: rotate(0deg);

重点知识点

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点
  旋转中心点(transform-origin)

transform-origin: x y;

知识要点

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
• 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

3.缩放： scale

transform: scale(x, y)

知识要点

• 注意，x 与 y 之间使用逗号进行分隔
• transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

4.2D 转换综合写法以及顺序问题

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

知识要点

• 同时使用多个转换，其格式为 transform: translate() rotate() scale()
• 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
• 但我们同时有位置或者其他属性的时候，要将位移放到最前面

5.动画(animation)

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

5.1.定义动画

@keyframes 动画名称 { 
   0% {        
   width: 100px;    }    
   100% {        width: 200px    }
   }

知识要点

• 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
• 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
• 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

5.2.使用动画

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

5.3.动画常见属性

div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out;
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;
}

div:hover {
  /* 规定动画是否暂停或者播放 */
  animation-play-state: paused;
}

5.4.动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

知识要点

• 简写属性里面不包含 animation-paly-state
• 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
• 要想动画走回来，而不是直接调回来：animation-direction: alternate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

二、3D转换

3D 的特点

• 近大远小
• 物体和面遮挡不可见

1.3D位移：translate3d(x, y, z)

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向

2.3D旋转：rotate3d(x, y, z)

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

3.透视：perspctive

如果想要网页产生 3D效果需要透视(理解成 3D物体投影的 `2D` 平面上)，实际上模仿人类的视觉位置，可视为安排一直眼睛去看

知识要点

• 透视需要写在被视察元素的父盒子上面
• 透视的单位是像素
• 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
• 距离视觉点越近的在电脑平面成像越大，越远成像越小

4.3D呈现 transfrom-style

控制子元素是否开启三维立体环境

知识要点

• transform-style: flat 代表子元素不开启 3D 立体空间，默认的
• transform-style: preserve-3d 子元素开启立体空间
• 代码写给父级，但是影响的是子盒子

---