CSS 的 transform
属性允许你对元素进行旋转、缩放、倾斜或移动等操作。以下是一些常见的变换类型:
基本语法
transform: transform-function(value);
常用的 transform
函数
-
translate:移动元素的 X 和 Y 轴位置。
transform: translate(50px, 100px); /* X 轴移动 50px,Y 轴移动 100px */
-
rotate:旋转元素,角度可以是正负值,单位是
deg
。transform: rotate(45deg); /* 顺时针旋转 45 度 */
-
scale:缩放元素。可以分别设置 X 轴和 Y 轴的缩放值。
transform: scale(1.5); /* 同时按比例放大 1.5 倍 */ transform: scale(1.5, 0.5); /* X 轴放大 1.5 倍,Y 轴缩小一半 */
-
skew:倾斜元素,分别设置 X 和 Y 轴的倾斜角度。
transform: skew(30deg, 20deg); /* X 轴倾斜 30 度,Y 轴倾斜 20 度 */
-
matrix:使用矩阵设置变换,是以上变换的组合形式。
transform: matrix(1, 0, 0, 1, 50, 100);
组合变换
你可以在 transform
属性中使用多个变换函数,以空格分隔,它们将按顺序应用。
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
示例
<div class="box">Transform me!</div><style>.box {width: 100px;height: 100px;background-color: #3498db;transform: translate(50px, 50px) rotate(30deg) scale(1.2);transition: transform 0.5s; /* 添加平滑过渡效果 */}/* 鼠标悬停时应用不同的变换 */.box:hover {transform: translate(0, 0) rotate(-30deg) scale(1);}
</style>
在这个示例中,.box
元素在鼠标悬停时会应用新的 transform
变换,带来交互效果。