CSS transform动画

news2024/11/14 18:43:07

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>