CSS 变换 – 平移、旋转、缩放和倾斜

第 12 讲：CSS 变换 – 平移、旋转、缩放和倾斜

欢迎来到《从基础到辉煌》课程第十二讲。今天，我们将探索 CSS 变换，这是一个强大的功能，可让您操纵元素的位置、大小和方向。我们将介绍translate()、rotate()、scale()和skew()等变换函数的基础知识。

1.变换属性概述

transform 属性允许您对元素应用各种变换，例如平移、旋转、缩放和倾斜。这些变换是相对于元素的原始位置应用的。

• 语法：

  transform: transform-function(value);

2.翻译

translate() 函数将元素从其原始位置沿 X 轴和 Y 轴移动。您可以指定像素 (px)、百分比 (%) 或其他单位的值。

• 示例：将元素向右平移 50 像素，向下平移 30 像素。

  .box {
    transform: translate(50px, 30px);
  }

在此示例中，.box 元素将从原始位置向右移动 50px，向下移动 30px。

3.旋转

rotate() 函数绕固定点旋转元素，默认情况下该固定点是元素的中心。旋转角度以度 (deg) 为单位指定。

• 示例：将元素旋转 45 度。

  .box {
    transform: rotate(45deg);
  }

在这种情况下，.box 元素将绕其中心顺时针旋转 45 度。

4.规模

scale() 函数调整元素的大小。您可以指定 X 轴和 Y 轴的缩放因子。值 1 表示元素的原始大小，而大于或小于 1 的值分别增大或减小大小。

• 示例：将元素缩放到原始大小的 1.5 倍。

  .box {
    transform: scale(1.5);
  }

在此示例中，.box 元素将缩放至其原始大小的 150%。

5.倾斜

skew() 函数使元素沿 X 轴和 Y 轴倾斜。角度以度 (deg) 为单位指定。

• 示例：将元素沿 X 轴倾斜 20 度，沿 Y 轴倾斜 10 度。

  .box {
    transform: skew(20deg, 10deg);
  }

在这种情况下，.box 元素将水平倾斜 20 度，垂直倾斜 10 度。

6.组合变换函数

您可以将多个变换函数组合在一个变换属性中。这些功能按照它们出现的顺序应用。

• 示例：组合平移、旋转和缩放。

  .box {
    transform: translate(50px, 30px) rotate(45deg) scale(1.5);
  }

在此示例中：

• .box 首先会被平移，然后旋转，最后缩放。每个转换都按顺序应用。

7.变换原点

transform-origin 属性指定发生变换的点。默认情况下，这是元素的中心，但您可以将其更改为任意点。

• 示例：将变换原点更改为左上角。

  .box {
    transform-origin: top left;
    transform: rotate(45deg);
  }

在这种情况下，.box 将围绕其左上角而不是中心旋转 45 度。

8. 3D 变换

CSS 还支持 3D 转换。您可以使用perspective()、rotateX()、rotateY()和translateZ()等函数来创建3D效果。

• 示例：添加透视以创建 3D 效果。

  .container {
    perspective: 1000px;
  }

  .box {
    transform: rotateY(45deg);
  }

在此示例中：

• .container 元素提供透视效果，使 .box 看起来在 3D 空间中旋转。

练习运动

1. 使用 CSS 变换创建卡片翻转动画。悬停时卡片应旋转 180 度以露出背面。
2. 尝试组合平移、旋转和缩放以在元素上创建独特的效果。

下一步： 在下一课中，我们将深入研究 CSS 动画 并学习如何为您的 Web 元素创建动态的动画效果。准备好用动作让您的设计变得栩栩如生！

在 LinkedIn 上关注我 -

里多伊·哈桑

以上是CSS 变换 – 平移、旋转、缩放和倾斜的详细内容。更多信息请关注PHP中文网其他相关文章！