CSS 中的 2D 变换函数

cssweb developmentfront end technology更新于 2025/12/16 8:44:17

2D 变换函数用于对元素应用 2D 变换，例如旋转、移动、缩放和倾斜。

平移减号;沿 x 和 y 轴移动元素。
缩放减号;沿 x 和 y 轴调整元素大小。
旋转减号;将元素移动一定角度。
倾斜减号;使元素沿 x 和 y 轴倾斜。

以下代码展示了 CSS 中的 2D 变换函数 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background-color: rgb(255, 0, 128);
   border:2px solid rgb(0, 35, 150);
   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 example</h1>
<div class="rotate">ROTATE()</div>
<div class="skew">SKEW()</div>
<div class="scale">SCALE()</div>
<div class="translate">TRANSLATE()</div>
</body>
</html>