1.1 transform 属性
CSS变换允许在不改变文档正常流的情况下，调整元素的位置、大小、旋转和倾斜。这是创建交互和动态网页界面的强大工具。让我们来看一下使用 transform、translate、rotate、scale 和 skew 属性的变换基础。
属性 transform 允许对元素应用二维和三维变换。它结合了不同的变换函数，如 translate、rotate、scale 和 skew。
语法：
element {
transform: transformation-function;
}
其中：
transformation-function: 应用到元素的变换函数
使用示例：
CSS
.element {
transform: translate(50px, 100px);
}
1.2 translate 变换
变换 translate 用于在 X 和/或 Y 轴上移动元素。
语法：
element {
transform: translate(x, y);
}
其中：
x: X 轴的偏移量（可以是负数或正数）y: Y 轴的偏移量（可以是负数或正数）
示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translate 变换</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 固定大小和颜色的元素.box:hover: 当鼠标悬停在元素上时，应用translate(50px, 50px)变换，将其向右和向下移动 50 像素
1.3 rotate 变换
变换 rotate 用于绕元素的中心旋转它。
语法：
element {
transform: rotate(angle);
}
其中：
angle: 旋转角度，以度为单位（可以是负数或正数）
示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rotate 变换</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 固定大小和颜色的元素.box:hover: 当鼠标悬停在元素上时，应用rotate(45deg)变换，顺时针旋转 45 度
1.4 scale 变换
变换 scale 用于在 X 和/或 Y 轴上调整元素的大小。
语法：
element {
transform: scale(sx, sy);
}
其中：
sx: X 轴的缩放（大于 1 放大元素，小于 1 缩小）sy: Y 轴的缩放（大于 1 放大元素，小于 1 缩小）
示例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scale 变换</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 固定大小和颜色的元素-
.box:hover: 当鼠标悬停在元素上时，应用scale(1.5, 1.5)变换， 将它的大小增大到原来的 1.5 倍
1.5 skew 变换
变换 skew 用于在 X 和/或 Y 轴上倾斜元素。
语法：
element {
transform: skew(ax, ay);
}
其中：
ax: X 轴的倾斜角（可以是负数或正数）ay: Y 轴的倾斜角（可以是负数或正数）
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>skew 变换</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 固定大小和颜色的元素。.box:hover: 当鼠标悬停在元素上时，应用skew(20deg, 10deg)变换，使它在 X 轴上倾斜 20 度，在 Y 轴上倾斜 10 度。
1.6 多种变换的组合
属性 transform 允许组合多种变换函数，以实现复杂的效果。
示例：
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: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码解释：
.box: 固定大小和颜色的元素.box:hover: 当鼠标悬停在元素上时，同时应用translate、rotate、scale和skew变换，创建复杂的效果
GO TO FULL VERSION