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

transform

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

  2. 属性:
    transform: []* | none

  • 旋转:
    transform: rotate(angle); /* an , 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


      【前端】-018-页面制作-CSS-元素变形_第1张图片
      transform-origin.png
  • 透视
    perspective: none | ;

    • 设置元素的透视效果
    • 在父元素定义perspective属性,其子元素会获得透视效果,而不是父元素本身
    • perspective-origin: x-axis y-axis;一同使用,改变 3D 元素的底部位置。
      【前端】-018-页面制作-CSS-元素变形_第2张图片
      perspective-origin
  • 设置嵌套的子元素的3D效果
    transform-style: flat | preserve-3d;

    • flat,子元素将不保留其 3D 位置。
    • preserve-3d,子元素将保留其 3D 位置。
  • 设置被旋转的元素的背面是否可见:
    backface-visibility: visible | hidden;

你可能感兴趣的:(【前端】-018-页面制作-CSS-元素变形)