css3的2d旋转-CSS 基础知识 – 2D 变体

bendan520 2023年8月26日 css3 0

变换是CSS3中最具颠覆性的功能之一。 明天，我们将介绍四种二维变换：旋转、缩放、倾斜和位移。

CSS3 中的变换是通过 Transform 属性实现的。

变换源属性

transform-origin 表示旋转的原点，默认位于包的中心。

Transform-origin 的值可以是 1、2 或 3，其中每个值表示一个方向上的倾斜量。 如果没有明确定义，则默认居中。

transform-origin: x y z;

旋转变体

旋转变体，虽然袋子是旋转的。

使用rotate()函数给transform属性一个形参来实现旋转变换。 如果角度为正，则顺时针旋转，否则逆时针旋转。

句型

transform: rotate(45deg)

例子

袋子从中心旋转 45 度。

              旋转<a href='https://www.wkzy.net/game/162918.html' title='变形' target='_blank' rel="noopener">变形</a>          .box {        margin: 50px;        width: 100px;        height: 100px;        background-color: blue;        transform-origin: center;        transform: rotate(45deg);      }

尺度变体

缩放变体放大和缩小袋子。

使用scale()函数给transform属性一个形式参数来实现缩放变换。 缩放函数接受的值是缩放比例列。 如果小于1，则表示放大，如果大于1，则表示缩小。

句型

transform: scale(2);

旋转css动画_旋转css代码_css3的2d旋转

例子

三袋，一袋扩大，一袋缩小，一袋不变。

<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属性一个形参来实现倾斜变换。 skew 函数接受两个值。 第一个值表示 X 轴的斜角css3的2d旋转，第二个值表示 Y 轴的斜角。

句型

tranform: skew(10deg, 20deg)

例子

两个袋子，其中一个不变，另一个袋子在x轴上倾斜10度，在y轴上倾斜0度。

              斜切变形          div {        display: inline-block;        width: 100px;        height: 100px;        background-color: orange;        margin: 50px;      }
      .box2 {        transform-origin: center;        transform: skew(10deg, 0deg);      }

排量变体

位移变体虽然一个包的位置发生了位移css3的2d旋转，有点像之前提到的相对定位，同样的位移变体之后，原来的位置就很难被其他包占据了。

使用translate()函数给transform属性一个形式参数来实现位移变换。 翻译函数接受两个值。 第一个值代表向右的距离，第二个值代表向上的距离。

句型

transform: translate(100px 200px)

例子

三个袋子，导致第二个袋子的位置发生变化。

                  位移变形
          .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;      }        
    
    
  </html>