【前端】-018-页面制作-CSS-元素变形

transform

1. 定义：修改CSS盒模型坐标空间，实现元素的移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew），支持2d和3d效果。

2. 属性：
   transform: <transform-function> [<transform-function>]* | none

• 旋转：
  transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */

  • 设置元素按照中心点进行旋转，可单独设置x轴、y轴和z轴的旋转角度
  • 通过3d关键字完成三维旋转：transform: rotate3d(anglex,angley,anglez);

• 移动
  transform: translate(tx[, ty]);

  • 设置元素按照向量[tx, ty]完成2D平移，如果ty没有指定，它的值默认为0
  • 通过3d关键字完成三维移动：transform: translate3d(x,y,z);
  • 可单独设置x轴、y轴和z轴移动位移，translateX(length) | translateY(length) | translateZ(length)

• 缩放
  transform: scale(sx[, sy]);

  • 设置元素在x轴和y轴的缩放比例，如果sy 未指定，默认认为和sx的值相同。
  • 也可以单独设置x轴|y轴缩放，scaleX(sx)|scaleY(sy)
  • 通过3d关键字完成三维缩放：transform: translate3d(x,y,z);
  • 可单独设置x轴、y轴和z轴缩放比例，scaleX(sx) | scaleY(sy) | scaleZ(sz)

• 倾斜
  transform: skew(ax[, ay]);

  • 设置元素在X轴和Y轴方向以指定的角度倾斜，如果ay未提供，在Y轴上没有倾斜。
  • 也可设置三维倾斜。

• 原点
  transform-origin: x-axis y-axis z-axis;

  • 设置坐标轴的原点位置，初始值：50% 50% 0

    
    transform-origin.png

• 透视
  perspective: none | <length>;

  • 设置元素的透视效果
  • 在父元素定义perspective属性，其子元素会获得透视效果，而不是父元素本身
  • 与perspective-origin: x-axis y-axis;一同使用，改变 3D 元素的底部位置。
    perspective-origin

• 设置嵌套的子元素的3D效果
  transform-style: flat | preserve-3d;

  • flat,子元素将不保留其 3D 位置。
  • preserve-3d,子元素将保留其 3D 位置。

• 设置被旋转的元素的背面是否可见：
  backface-visibility: visible | hidden;