CSS 转换：完整指南

CSS 转换是 Web 开发中的一个强大属性，它允许您操作 2D 或 3D 空间中的元素。有了它，您可以旋转、缩放、倾斜或移动元素，为您的网页添加动态视觉效果和交互性。

什么是 CSS 转换？

CSS 中的属性对元素应用转换，更改其形状、大小、位置或方向。转换发生在坐标系中，不会影响文档流，因此非常适合创建引人注目的动画和设计。

该属性的基本语法为：transform

transform: transformation-function;

您可以通过用空格分隔多个转换函数来使用它们：

transform: rotate(30deg) scale(1.5);

关键转换函数

以下是最常用的转换函数：

1. 旋转

围绕固定点旋转元素。

transform: rotate(45deg); /* Rotates the element 45 degrees */

2. 大小

更改元素的大小。

transform: scale(1.5); /* Enlarges the element to 150% */

3. 移动

水平或垂直移动元素。

transform: translate(50px, 100px); /* Moves the element 50px right and 100px down */

4. 倾斜

沿 X 轴或 Y 轴扭曲元素。

transform: skew(20deg, 10deg); /* Skews the element 20 degrees along X and 10 degrees along Y */

5. 矩阵

将多个转换合并到单个函数中。

transform: matrix(1, 0, 0, 1, 50, 100); /* Translates, rotates, or scales based on matrix values */

实例

示例 1：按钮悬停效果

<style>
  .button {
    width: 100px;
    height: 50px;
    background-color: #007bff;
    color: white;
    text-align: center;
    line-height: 50px;
    transition: transform 0.3s ease-in-out;
  }
  
  .button:hover {
    transform: scale(1.2) rotate(10deg);
  }
</style>

<div class="button">Hover me</div>

当您将鼠标悬停在按钮上时，它会放大并略微旋转，从而产生引人入胜的效果。

示例 2：3D 旋转

<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: coral;
    transform: rotateY(45deg);
  }
</style>

<div class="box"></div>

此示例沿 Y 轴应用 3D 旋转，使元素具有倾斜的外观。

用transform-origin

该属性指定转换的原点。默认情况下，原点是元素的中心。transform-origin

transform-origin: top left;
transform: rotate(45deg);

这会将元素绕其左上角旋转 45 度。

与动画相结合transform

您可以与规则结合使用来创建动画。transform@keyframes

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: limegreen;
    animation: moveRotate 2s infinite alternate;
  }
  
  @keyframes moveRotate {
    0% {
      transform: translateX(0) rotate(0deg);
    }
    100% {
      transform: translateX(100px) rotate(360deg);
    }
  }
</style>

<div class="animated-box"></div>

这将创建一个在循环中移动和旋转的长方体。

为什么使用 CSS 转换？

• 通过交互式元素增强用户体验。
• 提高网站美感。
• 与现代浏览器高效协作。
• 可以与过渡和动画结合使用，以获得复杂的效果。

浏览器支持

所有现代浏览器都支持该属性。对于旧版本的 Internet Explorer，请使用供应商前缀：transform

-webkit-transform: rotate(45deg); /* For Safari and older Chrome */
-moz-transform: rotate(45deg);    /* For Firefox */
-ms-transform: rotate(45deg);     /* For IE */
transform: rotate(45deg);

最后的思考

CSS Transform 属性是一个多功能工具，供 Web 开发人员创建具有视觉吸引力的交互式设计。通过掌握它的功能并将其与其