CSS 2D/3D变化篇

2D变换

• transform 元素的变换

• transform的2D变化的值

1. 平移 translate

   ​ 能使元素的位置发生移动

   ​ 1.1 translateX(偏移值x) 沿x轴方向平移

   ​ 1.2 translateY(偏移值y) 沿y轴方向平移

   ​ 1.3 translate(偏移值x， 偏移值y) 沿x和y轴方向平移

2. 缩放 scale

   ​ 本质上缩放的是坐标轴的单位长度。产生的效果： 尺寸不修改的 情况下， 放大缩小元素

   ​ 2.1 scaleX(x轴缩放倍数)

   ​ 2.2 scaleY(y轴缩放倍数)

   ​ 2.3 scale(x轴缩放倍数， y轴缩放倍数)

   ​ 元素缩放默认的基准点是中心点， 缩放永远会从基准点向外缩放

3. 倾斜 skew
   倾斜是一种剪切映射, 它在水平和垂直方向上将单元内的每个点扭曲一定的角度
   ​ 3.1 skewX(水平方向倾斜角度)
   ​ 3.2 skewY(垂直方向倾斜的角度)
   ​ 3.3 skew(水平方向倾斜角度， 垂直方向倾斜的角度)
   ​ 角度值 单位 deg
   ​ 水平方向倾斜， 旋转Y轴， 值为正， Y轴逆时针旋转， 值为负， Y轴顺时针旋转
   ​ 垂直方向倾斜， 旋转X轴， 值为正， X轴顺时针旋转， 值为负， X轴逆时针旋转

4. 旋转 rotate
   4.1 rotateX(x轴旋转的角度) 绕x轴旋转
   4.2 rotateY(y轴旋转的角度) 绕y轴旋转
   4.3 rotate(z轴旋转的角度) 绕z轴旋转
   注意： 元素旋转之后， 可能会形成立体的空间， 但是系统默认的3d立体效果是关闭的， 如果想要看3d立体效果， 需要人为打开。
   哪个元素形成立体空间， 要把打开立体效果的代码加个它的父级， 不是它本身！！！
   绕x轴旋转 正值 从左往右看 逆时针旋转； 负值， 顺时针旋转
   绕y轴旋转 正值 从上往下看 逆时针旋转； 负值， 顺时针旋转

• 2D变换参考的坐标轴为x-y的平面坐标轴

  重要的注意点:

  ​ 1. 在元素的变化概念里， 所谓的坐标轴， 不是指整个页面只有一个x-y， 要理解成每个元素都有一个自己的坐标轴， 对某个元素的变换， 只影响自身的坐标轴， 不影响其他元素的坐标轴

  ​ 2. transform产生的变换， 本质上影响的不是元素， 而是坐标轴。 一旦坐标轴发生了变换 ， 之后所有的操作都是在已发生改变后的坐标轴上进行的。

  ​ 3. transform的书写顺序， 有些时候会影响最终的展示效果， 原因参考第2个注意点

• eg：

  .box img:nth-child(2) {
      /*旋转img2*/
      transform: rotateY(-40deg);
      animation: rotateImg 2s linear infinite;
  }
  @-webkit-keyframes rotateImg{
      from{transform: rotateX(40deg) rotateY(30deg);}
      to{transform: rotateX(400deg) rotateY(390deg);}
  }
  

3D变换

• 3D变化相比与2D多了一条z轴， 是一个立体坐标轴

  ​ 1. 平移

  ​ 2. 旋转

  ​ 默认情况下， 元素在绕Z轴旋转的基准点为元素的中心点；如果想要改变旋转的基准点， 使用transform-origin： x方向位置， y方向位置

  ​ 2.1 px数值

  ​ 2.2 方位单词

  ​ 水平方向: left center right

  ​ 垂直方向: top center bottom

  ​ 2.3 百分比 相对于宽高

• eg：

  img {
      width: 200px;
      /*transform-origin: 200px 100px;*/
      /*transform-origin: right bottom;*/
      transform-origin: 50% 50%;
      animation: rotateImg 1s infinite;
  }
  @-webkit-keyframes rotateImg{
      from{
          transform: rotateZ(0deg);
      }
      to{
          transform: rotateZ(360deg);
      }
  }