变换

缩放

使用scale 属性来控制元素的缩放。

<Box scale="1.2" />

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

属性	CSS 属性	令牌类别
scale	scale	-

X 轴缩放

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

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

属性	CSS 属性	令牌类别
scaleX	--scale-x	-

Y 轴缩放

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

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

属性	CSS 属性	令牌类别
scaleY	--scale-y	-

旋转

使用 rotate 属性来控制元素的旋转属性。

<Box rotate="45deg" />

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

属性	CSS 属性	令牌类别
rotate	rotate	-

X 轴旋转

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

<Box rotateX="45deg" />

属性	CSS 属性	令牌类别
rotateX	--rotate-x	-

Y 轴旋转

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

<Box rotateY="45deg" />

属性	CSS 属性	令牌类别
rotateY	--rotate-y	-

平移

使用 translate 属性来控制元素的平移属性。

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

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

属性	CSS 属性	令牌类别
translate	translate	-

X 轴平移

使用 translateX 属性来控制元素的 translateX 属性。这需要将 translate 属性设置为 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	间距

Y 轴平移

使用 translateY 属性来控制元素的 translateY 属性。这需要将 translate 属性设置为 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	间距