【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);
}这样，移动、旋转和缩放变换会按照指定的顺序依次应用，合并成一个复合变换。
评论已关闭