Skip to content

Latest commit

 

History

History
194 lines (146 loc) · 5.39 KB

index.md

File metadata and controls

194 lines (146 loc) · 5.39 KB
title slug l10n
transform
Web/CSS/transform
sourceCommit
4940889b79f76552b95e092d48012cb6603a324b

{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/transform.html")}}

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

Warning

只能 transform 由盒模型定位的元素，也就是所有布局由 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> 值。

值

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

无障碍考虑

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

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

了解更多信息：

形式定义

{{CSSInfo}}

形式语法

{{csssyntax}}

示例

平移旋转一个元素

HTML

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

CSS

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

结果

{{EmbedLiveSample("平移旋转一个元素", "400", "160")}}

变换顺序

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

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;
}
.one {
  transform: translateX(200px) rotate(135deg);
}
.two {
  transform: rotate(135deg) translateX(200px);
}

结果

{{EmbedLiveSample("变换顺序", "400", "200")}}

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

更多示例

请查阅使用 CSS 变换以及 {{cssxref("<transform-function>")}} 获取更多示例。

规范

{{Specifications}}

浏览器兼容性

{{Compat}}

参见

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