尝试一下
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; 元素的包含块。
语法
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>+
<transform-function> =
<scale3d()> |
<scale()> |
<scaleX()> |
<scaleY()> |
<scaleZ()> |
<translate3d()> |
<translate()> |
<translateX()> |
<translateY()> |
<translateZ()> |
<rotate3d()> |
<rotate()> |
<rotateX()> |
<rotateY()> |
<rotateZ()> |
<skew()> |
<skewX()> |
<skewY()> |
<matrix3d()> |
<matrix()> |
<perspective()>
<scale3d()> =
scale3d( [ <number> | <percentage> ]#{3} )
<scale()> =
scale( <number> , <number>? )
<scaleX()> =
scaleX( <number> )
<scaleY()> =
scaleY( <number> )
<scaleZ()> =
scaleZ( [ <number> | <percentage> ] )
<translate3d()> =
translate3d( <length-percentage> , <length-percentage> , <length> )
<translate()> =
translate( <length-percentage> , <length-percentage>? )
<translateX()> =
translateX( <length-percentage> )
<translateY()> =
translateY( <length-percentage> )
<translateZ()> =
translateZ( <length> )
<rotate3d()> =
rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
<rotate()> =
rotate( [ <angle> | <zero> ] )
<rotateX()> =
rotateX( [ <angle> | <zero> ] )
<rotateY()> =
rotateY( [ <angle> | <zero> ] )
<rotateZ()> =
rotateZ( [ <angle> | <zero> ] )
<skew()> =
skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )
<skewX()> =
skewX( [ <angle> | <zero> ] )
<skewY()> =
skewY( [ <angle> | <zero> ] )
<matrix3d()> =
matrix3d( <number>#{16} )
<matrix()> =
matrix( <number>#{6} )
<perspective()> =
perspective( [ <length [0,∞]> | none ] )
<length-percentage> =
<length> |
<percentage>
示例
平移旋转一个元素
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
css
.one {
transform: translateX(200px) rotate(135deg);
}
.two {
transform: rotate(135deg) translateX(200px);
}
结果
当一个元素在被平移之前被旋转，它的平移方向是相对于旋转后的坐标系的。例子中的这个坐标系由一条点状直线表示。
更多示例
请查阅使用 CSS 变换以及 <transform-function> 获取更多示例。
规范
| 规范 |
|---|
| 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 演练场