transform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

尝试一下

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

如果属性的值不是 none，则将创建一个层叠上下文。在这种情况下，该元素将作为任何包含的 position: fixed; 或 position: absolute; 元素的包含块。

警告： 只能 transform 由盒模型定位的元素，也就是所有布局由 CSS 盒模型管理的元素，除了：非替换的行内盒子、表格列和表格列组。

语法

css

/* 关键字值 */
transform: none;

/* 函数值 */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 多个函数值 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 全局值 */
transform: inherit;
transform: initial;
transform: revert;
transform: revert-layer;
transform: unset;

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

值

<transform-function>: 要应用的一个或多个 CSS 变换函数。变换函数按从左到右的顺序相乘，也就是说复合变换按从右到左的顺序有效地应用。
none: 不应用任何变换。

无障碍考虑

缩放动画存在无障碍的问题，因为它们是某些类型的偏头痛的常见触发因素。如果你需要在网站上包含这种动画，你应该提供一个控件，允许用户在网站层面关闭所有动画。

另外，考虑利用 prefers-reduced-motion 媒体特性——使用它编写一个媒体查询，以便在用户在其系统首选项中指定减少动画时关闭动画。

了解更多信息：

形式定义

初始值	`none`
适用元素	可变换元素
是否是继承属性	否
Percentages	refer to the size of bounding box
计算值	as specified, but with relative lengths converted into absolute lengths
动画类型	a transform
Creates stacking context	是

形式语法

transform = 
  none              |
  <transform-list>  

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

示例

平移旋转一个元素

HTML

html

<div>被变换的元素</div>

CSS

css

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

结果

变换顺序

变换函数的顺序很重要。在这个例子中，使用相同的值对两个盒子进行了旋转和平移；只不过，变换函数的顺序不同。

HTML

html

<div class="original"></div>
<div class="one">1</div>
<div class="two">2</div>

CSS

div {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 200px;
  top: 50px;
  font-size: 4rem;
  line-height: 200px;
  text-align: center;
}
.original {
  border: 1px dashed;
}
.original:before,
.original:after {
  content: "";
  position: absolute;
  top: 100px;
  width: 500px;
  left: -150px;
  height: 1px;
  border-top: 2px dotted;
}
.original:after {
  transform: rotate(135deg);
}
.one {
  background-color: #ccc;
}
.two {
  background-color: #d6bb72;
}

css

.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

结果

当一个元素在被平移之前被旋转，它的平移方向是相对于旋转后的坐标系的。例子中的这个坐标系由一条点状直线表示。

规范

Specification
CSS Transforms Module Level 2 # transform-functions
CSS Transforms Module Level 1 # transform-property
Scalable Vector Graphics (SVG) 2 # TransformProperty

浏览器兼容性

参见

使用 CSS 变换
<transform-function> 数据类型，包含了所有的变换函数
单独的 CSS 属性：translate、rotate 和 scale（不存在 skew 属性）。
在线直观感受 CSS Transform 函数的工具：CSS Transform 演练场