Skip to main content

CSS 属性 transform

Docs

  • CSS transform 属性允许对某一个元素进行某些形变，包括旋转，缩放，倾斜或平移等。

  • transform 是形变的意思，transformer 就是变形金刚；

  • 注意事项：并非所有的盒子都可以进行 transform 的转换（通常行内级元素不能进行形变）

    • 所以，transform 对于行内级非替换元素是无效的；
    • 比如对 span、a 元素等；

  • 常见的函数 transform-function 有：

    • 平移：translate(x, y)
    • 缩放：scale(x, y)
    • 旋转：rotate(deg)
    • 倾斜：skew(deg, deg)

    通过上面的几个函数，我们可以改变某个元素的形变。

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

transform 属性接受多个值，这些值定义了要应用的转换。下面是一些常用的转换函数：

  • translate() ：它可以将元素沿着 X 和 Y 轴移动一个指定的距离。例如：translate(50px, 100px) 将会把元素向右平移 50 像素，向下平移 100 像素。
  • rotate() ：它可以绕元素中心点旋转一个指定的角度。例如：rotate(45deg); 将会把元素顺时针旋转 45 度。
  • scale() ：它可以通过增加或减少元素的大小来缩放元素。例如：scale(2, 0.5) 将会把元素水平方向变为原来的两倍，竖直方向变为原来的一半。
  • skew() ：它可以沿着 X 和 Y 轴倾斜元素。例如：skew(30deg, 20deg) 将会把元素沿着 X 轴倾斜 30 度，沿着 Y 轴倾斜 20 度。

除了这些基本的转换函数之外，还有一些其他的转换函数可以使用，如 matrix()、perspective()、rotateX()、rotateY()、rotateZ() 等等。

警告

只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

注意

当你在元素上应用 transform 属性时，不会影响到该元素在文档流中的位置和大小，因此周围的元素也不会因此产生位移。

如果想要元素从文档流中脱离，并且不占据原来的空间，则需要同时应用 position:absolute 或者 position:fixed 属性。

取值​

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

语法​

transform属性可以指定为关键字值 none 或一个或多个 <transform-function> 值。

transform =
  none              |
  <transform-list>

<transform-list> =
  <transform-function>+

  • <transform-function>: 要应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

  • none: 不应用任何变换。

Details
Details
Details
Details