实现3D动画

时间：2021-10-11 01:23:02

一、transform

Transform是形变的意思（通常也叫变换），transformer就是变形金刚
常见的函数transform function有：
平移：translate(x, y)
缩放：scale(x, y)
旋转：rotate(deg)
倾斜：skew(deg, deg

二、rotate（旋转）

该CSS函数定义一个变换，它将元素围绕固定轴旋转。旋转量由指定的角度确定; 为正，旋转将为顺时针，为负，则为逆时针。

只有一个值，表示旋转的角度（单位deg）

三、translate（平移）

translateX(x)、translateY(y)、translateZ(z)
该函数表示在二、三维平面上移动元素

四、scale（缩放）

scaleX、scaleY、scaleZ
函数指定了一个沿 x、y 、z轴调整元素缩放比例因子

 1：保持不变
 2：放大一倍
0.5：缩小一半

五、transform-style（选择3D） 

transform-style

该CSS属性用于设置元素的子元素是定位在 3D 空间中还是平展在元素的2D平面中

flat：指示元素的子元素位于元素本身的平面内。

preserve-3d：指示元素的子元素应位于 3D 空间中

实现3D动画

 六、制作一个正方体

实现3D动画

<!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>Document</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 100px;
      background-color: aqua;
    }
    .box {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: red;
      /* 在父元素中添加 transform-style来启用3D空间 */
      transform-style: preserve-3d;
      transform: rotateX(-33.5deg) rotateY(45deg);
    }
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .top {
      /* translateZ(50px)向上平移 */
      transform: rotateX(90deg) translateZ(50px);
      background-color: antiquewhite;
    }
    .bottom {
      background-color: rgba(190, 216, 76, 0.712);
      transform: rotateX(-90deg) translateZ(50px);
    }

    .front {
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(0deg) translateZ(50px);
    }

    .back {
      background-color: rgba(0, 255, 255, 0.4);
      transform: rotateY(-180deg) translateZ(50px);
    }

    .left {
      background-color: rgba(221, 103, 182, 0.4);
      transform: rotateY(-90deg) translateZ(50px);
    }
    .right {
      background-color: rgba(0, 0, 255, 0.4);
      transform: rotateY(90deg) translateZ(50px);
    }
  </style>
  <body>
    <div class="box">
      div
      <!-- 子元素 -->
      <div class="item top">1</div>
      <div class="item bottom">2</div>
      <div class="item front">3</div>
      <div class="item back">4</div>
      <div class="item left">5</div>
      <div class="item right">6</div>
    </div>
  </body>
</html>

 

标签：

相关文章