四种 2D CSS 变形：旋转、缩放、倾斜和位移变形

terry 2年前 (2023-09-28) 阅读数 208 #数据结构与算法

变形是 CSS3 中最具颠覆性的功能之一。今天我们介绍四种 2D 变形：旋转、缩放、倾斜和位移变形。

转换是在 CSS3 中使用 transform 属性实现的。

transform-origin 属性

transform-origin 表示旋转原点，默认为场的中心。

transform-origin 可以有一个、两个或三个值，每个值代表一个方向的偏移量。如果没有明确定义，则默认为居中。

transform-origin: x y z;

第一个值表示X轴上的偏移量，可以用像素或百分比等长度单位表示；也可以用左、中、右、上、孔之间的值来表示。
第二个值表示Y轴偏移量，可以用像素或百分比等长度单位表示；也可以用左、中、右、上、孔之间的值来表示。
第三个值代表Z轴偏移，只能用像素等长度单位表示。

旋转变换

旋转变换连盒子也在旋转。

使用函数rotate()为属性transform 赋值以实现旋转变形。如果角度为正，则顺时针旋转，否则逆时针旋转。

语法

transform: rotate(45deg)

示例

字段以中心为原点旋转 45 度。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>旋转变形</title>    <style>      .box {        margin: 50px;        width: 100px;        height: 100px;        background-color: blue;        transform-origin: center;        transform: rotate(45deg);      }</style>  </head>  <body>    <div class="box"></div>  </body></html>

变焦转换

变焦转换是指放大和缩小画面。使用cScale()函数给Transform 赋值，实现缩放变形。放大，小于1表示缩小。

语法

transform: scale(2);

示例

三个字段，一个放大，一个缩小，一个不变。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>缩放变形</title>    <style>      div {        display: inline-block;        width: 100px;        height: 100px;        background-color: orange;        margin: 50px;      }
      .box1 {        transform: scale(2);      }
      .box3 {        transform: scale(0.5);      }</style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>    <div class="box3"></div>  </body></html>

倾斜变换

倾斜变换盒子也是倾斜的。

使用函数skew()为属性transform 赋值，实现倾斜变形。函数斜杠有两个值。第一个值代表 X 轴倾斜角度第二个值代表 Y 轴倾斜角度

语法

tranform: skew(10deg, 20deg)

示例

两个框，其中一个保持不变，另一个框有x 轴倾斜 10 度，y 轴倾斜 0 度。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>斜切变形</title>    <style>      div {        display: inline-block;        width: 100px;        height: 100px;        background-color: orange;        margin: 50px;      }
      .box2 {        transform-origin: center;        transform: skew(10deg, 0deg);      }</style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>  </body></html>

位移变形

位移变形即使盒子的位置发生了位移，也和前面提到的相对位置有些类似。同样变形后，原来位置的位移不能被其他盒子占据。

使用函数translate()为属性transform 赋值，实现位移变形。函数 translate 接受两个值。第一个值表示向右滚动的距离，第二个值表示向下滚动的距离。

语法

transform: translate(100px 200px)

示例

三个字段，导致第二个字段的位置发生变化。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>位移变形</title>
    <style>      .box1 {        width: 100px;        height: 100px;        background-color: red;      }      .box2 {        width: 100px;        height: 100px;        background-color: green;        transform: translate(200px, 200px);      }
      .box3 {        width: 100px;        height: 100px;        background-color: blue;      }</style>  </head>  <body>    <div class="box1"></div>    <div class="box2"></div>    <div class="box3"></div>  </body></html>