CSS3 2D 转换
天天向上
发布： 2025-02-21 22:55:35
原创
807
人浏览过
CSS3 2D 转换允许我们在网页元素上进行平移、旋转、缩放和倾斜等操作。所有的 2D 转换都是通过 transform 属性来实现的，下面是一些常见的 2D 转换操作及其使用方法。
1. 平移（translate）
平移操作会将元素沿着 X 或 Y 轴进行移动。
- translateX: 沿 X 轴平移。
- translateY: 沿 Y 轴平移。
- translate: 沿 X 和 Y 轴同时平移。
div {
transform: translate(50px, 100px);
}这个例子将元素平移 50 像素到右，100 像素向下。
div {
transform: translateX(50px); /* 仅沿 X 轴平移 */
}2. 旋转（rotate）
旋转操作会围绕元素的中心进行旋转，单位是角度（deg）。
div {
transform: rotate(45deg);
}这个例子将元素旋转 45 度。
div {
transform: rotate(-30deg); /* 逆时针旋转 */
}3. 缩放（scale）
缩放操作可以放大或缩小元素。
- scaleX: 沿 X 轴缩放。
- scaleY: 沿 Y 轴缩放。
- scale: 同时沿 X 和 Y 轴缩放。
div {
transform: scale(1.5); /* 放大 1.5 倍 */
}div {
transform: scaleX(2); /* 沿 X 轴放大 2 倍 */
}4. 倾斜（skew）
倾斜操作可以沿着 X 或 Y 轴进行角度倾斜。
- skewX: 沿 X 轴倾斜。
- skewY: 沿 Y 轴倾斜。
- skew: 同时沿 X 和 Y 轴倾斜。
div {
transform: skew(20deg, 10deg);
}这个例子会将元素同时沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。
5. 组合转换
可以将多种转换操作组合在一起，并按顺序执行。
div {
transform: translate(50px, 100px) rotate(45deg) scale(1.2);
}这个例子会首先平移元素 50px 和 100px，然后旋转 45 度，最后将其缩放 1.2 倍。
6. transition 与 transform 的结合
为了使转换更平滑，可以使用 transition 来添加动画效果。
div {
transition: transform 0.5s ease;
}
div:hover {
transform: translate(200px, 100px) rotate(45deg);
}这个例子在元素被悬停时，将平滑地将元素平移并旋转。transition 使得转换效果持续 0.5 秒，并使用 ease 缓动函数。
综合实例
假设你有一个卡片元素，你想在鼠标悬停时让它平移并旋转，同时加上平滑的过渡效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换</title>
<style>
.card {
width: 200px;
height: 300px;
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translate(100px, 50px) rotate(15deg);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="card">Hover Me!</div>
</body>
</html>这个实例中，卡片元素在鼠标悬停时会平移并旋转，同时添加阴影，并且所有的转换都平滑过渡。
通过掌握这些基本的 2D 转换，你可以在网页中创建丰富的动态效果和交互体验！