跳至主要內容

元素转换

𝓳𝓭𝔂𝓼𝔂𝓪大约 3 分钟

元素转换

transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。

旋转函数（rotate）

在 CSS3 中，使用 rotate 函数能够让指定的元素对象绕原点旋转，主要在二维空间内进行操作。

image.png
image.png
transform: rotate(角度); /*元素按照指定角度旋转*/

规定参数为正时，顺时针旋转；参数为负时，逆时针旋转。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 20px;
        display: inline-block;
        background-color: chartreuse;
      }
      /*向右旋转 60 度*/
      .c1 {
        background-color: #ffe6e6;
        transform: rotate(60deg);
      }
      /*向左旋转 60 度*/
      .c2 {
        background-color: #a7c5eb;
        transform: rotate(-60deg);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div></div>
    <div class="c2"></div>
  </body>
</html>
image.png
image.png

rotateX 和 rotateY 的使用

除了使用 rotate 函数绕原点来旋转指定元素外，我们还可以围绕指定轴来旋转元素。

rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。其使用格式如下所示：

transform: rotateX(角度);

rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转。其使用格式如下所示：

transform: rotateY(角度);

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .c1 {
        transform: rotateX(70deg);
      }
      .c2 {
        transform: rotateX(180deg);
      }
      .c3 {
        transform: rotateY(45deg);
      }
      .c4 {
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c1"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png"
        class="c2"
      />
    </div>
    <div>
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c3"
      />
      <img
        src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png"
        class="c4"
      />
    </div>
  </body>
</html>
image.png
image.png

移动函数（translate）

translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。

transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
      }
      /*沿 X 轴向右移动 20 个像素*/
      .c1 {
        background-color: #51adcf;
        transform: translateX(20px);
      }
      /*沿 Y 轴向下移动 30 个像素*/
      .c2 {
        background-color: #ffe5b9;
        transform: translateY(30px);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
  </body>
</html>
image.png
image.png

页面上有两个 div 元素块，使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素；使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。

缩放函数（scale）

scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。

transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 30px;
      }
      .c1 {
        background-color: rgba(179, 153, 38, 0.651);
      }
      /*沿着 X 和 Y 轴进行缩放*/
      .c2 {
        background-color: #9088d4;
        transform: scale(2);
      }
      /*沿着 X 轴进行缩放*/
      .c3 {
        background-color: #ffe5b9;
        transform: scaleX(2);
      }
      /*沿着 Y 轴进行缩放*/
      .c4 {
        background-color: #1c8181;
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
  </body>
</html>
image.png
image.png
  • 在页面上有四个 div 元素块，第一个是宽和高均为 50 个像素的正方形元素块，我们另外三个元素块在此基础上进行缩放。
  • 第二个元素块使用 transform: scale(2) 让元素同时沿着 X 轴和 Y 轴扩大 2 倍。
  • 第三个元素块使用 transform: scaleX(2) 让元素沿着 X 轴扩大 2 倍。
  • 第四个元素块使用 transform: scaleY(2) 让元素沿着 Y 轴扩大 2 倍。
默认页脚
Copyright © 2023 𝓳𝓭𝔂𝓼𝔂𝓪