CSS transform
属性用于对元素应用 2D 或 3D 转换。它允许您平移、旋转、缩放、倾斜元素。
语法:
transform: <transform-function> [<transform-function>]...;
最常用的转换函数:
- translateX(x):水平平移元素 x 个单位。
- translateY(y):垂直平移元素 y 个单位。
- translate(x, y):同时水平和垂直平移元素。
- rotate(angle):围绕元素的中心旋转 angle 度(顺时针,负数为逆时针)。
- scaleX(scale):沿 x 轴缩放元素 scale 倍。
- scaleY(scale):沿 y 轴缩放元素 scale 倍。
- scale(scaleX, scaleY):沿 x 轴和 y 轴同时缩放元素。
- skewX(angle):沿 x 轴倾斜元素 angle 度。
- skewY(angle):沿 y 轴倾斜元素 angle 度。
示例:
/* 平移元素 50px 向右和 100px 向下 */
transform: translate(50px, 100px);
/* 旋转元素 45 度 */
transform: rotate(45deg);
/* 沿 x 轴缩放元素 2 倍,沿 y 轴缩放元素 1.5 倍 */
transform: scale(2, 1.5);
/* 沿 x 轴倾斜元素 30 度 */
transform: skewX(30deg);
CSS transform-origin
属性定义了变换的原点,即变换相对于其应用的元素的位置。它可以指定沿 x 轴和 y 轴的偏移量,或一个关键字。
语法:
transform-origin: <x-axis-position> <y-axis-position>;
值:
<x-axis-position>
:指定沿 x 轴的偏移量。可以是长度值(例如 “50px”)或百分比值(例如 “50%”)。<y-axis-position>
:指定沿 y 轴的偏移量。可以是长度值(例如 “50px”)或百分比值(例如 “50%”)。
关键字:
top
:原点位于元素的顶部。bottom
:原点位于元素的底部。left
:原点位于元素的左边。right
:原点位于元素的右边。center
:原点位于元素的中心。
默认值:
50% 50%
(元素的中心)
示例:
以下示例将元素的变换原点设置为其右上角:
element {
transform-origin: right top;
}
应用:
transform-origin
属性用于控制元素变换的行为。例如,它可以用来:
- 创建围绕特定点旋转的动画。
- 将元素放置在相对于其父元素的特定位置。
- 创建复杂的三维效果。
注意:
- 转换函数可以组合使用,以创建更复杂的转换。
- 转换的顺序很重要,因为它们将按顺序应用。
transform-origin
属性仅适用于具有transform
属性的元素。- 对于使用
translate()
变换的元素,transform-origin
属性定义了平移的原点。对于scale()
和rotate()
变换,它定义了变换的中心点。