变换

缩放

¥Scale

使用 scale 属性控制元素的 scale 属性。

¥Use the scale prop to control the scale of an element.

<Box scale="1.2" />

当 scale 属性设置为 auto 时，scaleX 和 scaleY 属性用于控制元素的缩放。

¥When the scale prop is set to auto, the scaleX and scaleY props are used to control the scale of the element.

属性	CSS 属性	标记类别
scale	scale	*

缩放 X

¥Scale X

使用 scaleX 属性控制元素的 scaleX 属性。这需要将 scale 属性设置为 auto。

¥Use the scaleX prop to control the scaleX property of an element. This requires the scale prop to be set to auto.

<Box scale="auto" scaleX="1.3" />

属性	CSS 属性	标记类别
scaleX	--scale-x	*

缩放 Y

¥Scale Y

使用 scaleY 属性控制元素的 scaleY 属性。这需要将 scale 属性设置为 auto。

¥Use the scaleY prop to control the scaleY property of an element. This requires the scale prop to be set to auto.

<Box scale="auto" scaleY="0.4" />

属性	CSS 属性	标记类别
scaleY	--scale-y	*

旋转

¥Rotate

使用 rotate 属性控制元素的 rotate 属性。

¥Use the rotate prop to control the rotate property of an element.

<Box rotate="45deg" />

当 rotate 属性设置为 auto 时，rotateX 和 rotateY 属性用于控制元素的旋转。

¥When the rotate prop is set to auto, the rotateX and rotateY props are used to control the rotate of the element.

属性	CSS 属性	标记类别
rotate	rotate	*

旋转 X

¥Rotate X

使用 rotateX 属性控制元素的 rotateX 属性。

¥Use the rotateX prop to control the rotateX property of an element.

<Box rotateX="45deg" />

属性	CSS 属性	标记类别
rotateX	--rotate-x	*

旋转 Y 轴

¥Rotate Y

使用 rotateY 属性控制元素的 rotateY 属性。

¥Use the rotateY prop to control the rotateY property of an element.

<Box rotateY="45deg" />

属性	CSS 属性	标记类别
rotateY	--rotate-y	*

平移

¥Translate

使用 translate 属性控制元素的 translation 属性。

¥Use the translate prop to control the translate property of an element.

<Box translate="40px" />
<Box translate="50% -40%" />

当 translate 属性设置为 auto 时，translateX 和 translateY 属性用于控制元素的平移。

¥When the translate prop is set to auto, the translateX and translateY props are used to control the translate of the element.

属性	CSS 属性	标记类别
translate	translate	*

平移 X

¥Translate X

使用 translateX 属性控制元素的 translateX 属性。这需要将 translate 属性设置为 auto。

¥Use the translateX prop to control the translateX property of an element. This requires the translate prop to be set to auto.

// hardcoded values
<Box translate="auto" translateX="50%" />
<Box translate="auto" translateX="20px" />

// token values
<Box translate="auto" translateX="4" />
<Box translate="auto" translateX="-10" />

属性	CSS 属性	标记类别
translateX	--translate-x	spacing

平移 Y

¥Translate Y

使用 translateY 属性控制元素的 translateY 属性。这需要将 translate 属性设置为 auto。

¥Use the translateY prop to control the translateY property of an element. This requires the translate prop to be set to auto.

// hardcoded values
<Box translate="auto" translateY="-40%" />
<Box translate="auto" translateY="4rem" />

// token values
<Box translate="auto" translateY="4" />
<Box translate="auto" translateY="-10" />

属性	CSS 属性	标记类别
translateY	--translate-y	spacing