CSS transform-y

CSS transform-y 属性定义元素沿着 Y 轴方向的 2D 变换。可以使用 translate、rotate、scale 和 skew 等函数对元素进行平移、旋转、缩放和倾斜的变换操作。

语法

transform-y: none | <transform-functions>

• none：默认值，表示元素不进行变换
• ：表示应用于元素的一个或多个变换函数（如 translate、rotate、scale、skew 等）

代码示例

/* 将元素沿 y 轴平移50px */
transform-y: translateY(50px);

/* 将元素沿 y 轴旋转45度 */
transform-y: rotateY(45deg);

/* 将元素沿 y 轴缩小为原来的50% */
transform-y: scaleY(0.5);

/* 将元素沿 y 轴倾斜30度 */
transform-y: skewY(30deg);

备注

• 所有 CSS3 变换都使用 transform 属性设置，包括 transform-y。
• transform-y 只能应用于 2D 变换，如果要进行 3D 变换，需要使用 transform-style 属性将元素转换为 3D。
• transform-y 是一个不常用的属性，更常用的属性是 transform，它可以同时对元素进行 X 轴和 Y 轴的变换操作。