【CSS3】CSS3 2D 转换 - 三种变换的综合写法 ( 同时进行 移动 / 旋转 / 缩放 变换 | 代码示例 )
/* 同时进行移动、旋转和缩放变换的示例 */
.element {
/* 首先移动元素 */
transform: translateX(50px) translateY(100px);
/* 然后旋转元素 */
transform: rotate(45deg);
/* 最后缩放元素 */
transform: scale(1.5, 0.8);
}
上述代码中,.element
类的 transform
属性被重复定义了三次,每次只应用一种变换类型。但是,这种写法并没有将三种变换合并在一个 transform
属性中,因此它不会产生预期的效果。
正确的写法应该是把所有变换函数放在一个 transform
属性中,并用空格分隔它们:
/* 正确的同时进行移动、旋转和缩放变换的写法 */
.element {
transform: translateX(50px) translateY(100px) rotate(45deg) scale(1.5, 0.8);
}
这样,移动、旋转和缩放变换会按照指定的顺序依次应用,合并成一个复合变换。
评论已关闭