CSS Transforms

撰写时间：2025-03-13

修订时间：2025-03-13

translate

平移。

body { transform: translate(25px, 25px); } #transformed { transform: translate(150px, 20px); border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } div { width: 100px; height: 100px; border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; }

函数原型为：

translate() = translate(<length-percentage>[, <length-percentage>]?)

若未提供第2个参数，则默认为0。

scale

缩放。

body { transform: translate(25px, 25px); } #transformed { transform: scale(0.5, 0.5); border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } div { width: 100px; height: 100px; border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; }

函数原型为：

scale() = scale(<number>[, <number>]?)

若未提供第2个参数，则取值自第1个参数值。

rotate

围绕原点顺时针旋转。

body { transform: translate(25px, 25px); } #transformed { transform: rotate(45deg); border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } div { width: 100px; height: 100px; border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; }

函数原型为：

rotate() = rotate([ <angle> | <zero> ])

skew

扭曲。

共有skew, skewX及skewY共3个函数，其中skew函数是为兼容之前版本而创建的，应尽量不予使用；只使用 skewX及skewY这两个函数。

skewX

在水平方向上扭曲。

body { transform: translate(100px, 25px); } #transformed { transform: skewX(45deg); border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } div { width: 100px; height: 100px; border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; }

上下两条横边的方向保持不变，函数参数中的角度值就是左右两条竖边分别围绕各自中点逆时针旋转时与两条原来的竖边所形成的夹角。

动画：

body { transform: translate(100px, 25px); } #transformed { animation: skew 10s infinite; border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } @keyframes skew { 0% { transform: skewX(0deg); } 50% { transform: skewX(45deg); } 100% { transform: skewX(89deg); } } div { width: 100px; height: 100px; border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; }

在Safari中，角度值不能设为90deg，且当值在46deg到89deg区间，高度值突然增大，超出预料。Chrome则正常。

将角度值修改为91deg, 135deg, 180deg，看看效果。

函数原型为：

skewX() = skewX( [ <angle> | <zero> ] )

skewY

在垂直方向上扭曲。

body { transform: translate(100px, 25px); } #transformed { transform: skewY(45deg); border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } div { width: 100px; height: 100px; border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; }

左右两条竖边的方向保持不变，函数参数中的角度值就是上下两条横边分别围绕各自中点顺时针旋转时与两条原来的横边所形成的夹角。

transform-origin

旋转

:root { --org-x: 50px; --org-y: 50px; --org-width: 10px; --org-height: 10px; --div-width: 100px; --div-height: 100px; } body { transform: translate(100px, 25px) scale(1); } #transformed { transform-origin: var(--org-x) var(--org-y); animation: rotate 10s infinite; border-style: solid; background-color: hsla(250, 50%, 50%, 0.5); } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } div { width: var(--div-width); height: var(--div-height); border: 1px dashed gray; background-color: rgb(66 66 66 / 0.5); } #original { float: left; position: relative; } #org { position: absolute; transform: translate(calc(var(--org-width) / -2), calc(var(--org-height) / -2)); left: var(--org-x); top: var(--org-y); width: var(--org-width); height: var(--org-height); border-style: solid; border-radius: 50%; background-color: orange; }

改变--org-x及--org-y的值，观察相应的变化。必要时可调节body的平移及缩放值。

注，在CSS代码中，因#org的left及top属性各自引用了--org-x及--org-y的值，因此，后者应使用数值或百分比的形式，如50px，或50%。

CSS Transforms

translate

scale

rotate

skew

skewX

skewY

transform-origin

旋转

参考资源