3.1 组合变换基础
CSS 提供了组合多个变换的能力，用来创建复杂的视觉效果。 这些变换可以包括 translate、rotate、scale 和 skew，都可以在一个 transform 属性中组合。
transform 属性可以包含多个变换函数，用空格分隔。它们将按照顺序依次应用。 理解不同变换如何相互作用是创建复杂动画和效果的关键。
语法：
element {
transform: function1() function2() ... functionN();
}
例子：
CSS
element {
transform: translate(20px, 20px) rotate(45deg) scale(1.5) skew(10deg, 5deg);
}
移动和旋转
在这个例子中，元素向右移动 50 像素和向下移动 50 像素，然后旋转 45 度。
例子：
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动和旋转</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 这个元素首先向右下移动 50 像素，然后顺时针旋转 45 度。
3.2 不同组合的分析
1. 缩放和倾斜
在这个例子中，元素缩放 1.5 倍，然后在 X 轴上倾斜 20 度，Y 轴上倾斜 10 度。
例子：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缩放和倾斜</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 这个元素首先在两个轴上缩放 1.5 倍，然后在 X 轴上倾斜 20 度，在 Y 轴上倾斜 10 度。
2. 移动、旋转和缩放
在这个例子中，元素向右移动 100 像素，旋转 30 度，然后在 X 轴上缩放 2 倍，Y 轴上缩放 1.5 倍。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动、旋转和缩放</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: translate(100px, 0) rotate(30deg) scale(2, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
-
.box: 这个元素首先向右移动 100 像素，然后旋转 30 度，最后在 X 轴上缩放 2 倍，Y 轴上缩放 1.5 倍。
3.3 变换顺序的影响
当多个变换组合在一起时，重要的是要知道它们是依次应用的。也就是说，每个后续变换会影响到之前的结果。
在这个例子中展示了如何通过改变变换顺序影响最终结果。
例子 A：先旋转，后移动
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>先旋转，后移动</title>
<style>
.box-a {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg) translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box-a"></div>
</body>
</html>
例子 B：先移动，后旋转
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>先移动，后旋转</title>
<style>
.box-b {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: translate(50px, 50px) rotate(45deg);
}
</style>
</head>
<body>
<div class="box-b"></div>
</body>
</html>
代码解释：
-
.box-a: 元素首先旋转 45 度，然后向右下移动 50 像素，这会导致元素从其旋转后的位置沿对角线移动。 -
.box-b: 元素首先向右下移动 50 像素，然后旋转 45 度，这会导致元素相对于其新位置旋转。
GO TO FULL VERSION