使用 CSS3 2D 变换函数

cssweb developmentfront end technology更新于 2025/12/10 19:56:17

2D 变换用于重新更改元素结构，例如平移、旋转、缩放和倾斜。

以下是一些 2D 变换函数 −

Sr.No.	值 &说明
1	matrix(n,n,n,n,n,n) 用于定义具有六个值的矩阵变换
2	translate(x,y) 用于沿 x 轴和 y 轴变换元素
3	translateX(n) 用于沿 x 轴变换元素
4	translateY(n) 用于沿 y 轴变换元素
5	scale(x,y) 用于改变元素
6	scaleX(n) 用于更改元素的宽度

以下代码展示了 CSS3 中的二维变换函数 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background-color: rgb(98, 0, 255);
   margin: 20px;
   display: inline-block;
   color: white;
}
.rotate {
   transform: rotate(20deg);
}
.translate {
   transform: translate(30px, 20px);
}
.scale {
   transform: scale(2, 1);
   margin-left:70px;
}
.skew {
   transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transform functions</h1>
<div class="rotate">ROTATE</div>
<div class="skew">
SKEW
</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html>