目录

变形

 

定义

变形(Transform-)属性是一些对HTML元素进行线性仿射变形相关的CSS属性。

概述

变形包括2D变形和3D变形。

具体常用的2D变形有以下5种：

  1. 伸缩(scale)
    使元素以相同的缩放中心点和基数沿水平方向、垂直方向或两个方向同时缩放。其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
  2. 扭曲(skew)
    使元素按一定的角度值在水平方向、垂直方向或两个方向同时扭曲变形。
  3. 旋转(rotate)
    使元素以某个基点按一定的角度值进行旋转。
  4. 移动(translate)
    使元素沿水平方向、垂直方向或两个方向同时移动。
  5. 矩阵(matrix)
    使元素按矩阵进行2D变形。

3D变形在2D变形的基础上增加了z坐标的变换。

列表

元素描述版本
transformtransform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。值包含（translate()，scale()，rotate(),skew(),perspective()等）。3
<transform-function>规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。３
transform-origintransform-origin 属性更改元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。3
transform-styletransform-style规定该元素的嵌套元素如何在3D空间中呈现。3

变更点

变形属性全部是CSS3新增加的。


跳至内容顶部