CSS3 3D旋转动画浅析

Posted on 2017-10-11 14:38 尘无埃阅读(511) 评论(0) 收藏举报

废话不多说，先上效果图（实际效果是流畅的旋转图, 因为Gif制作起来麻烦，就上个静态图大家凑合看吧）：

然后贴HTML代码部分:

<div class="outer-box">
    <div class="inner-box">
      <div class="side top-side">Top side</div>
      <div class="side bottom-side">Bottom side</div>
      <div class="side front-side">Front side</div>
      <div class="side rear-side">Rear side</div>
      <div class="side left-side">Left side</div>
      <div class="side right-side">Right side</div>
    </div>
  </div>

在贴CSS样式部分：

<style>
  .outer-box {
    position: relative;
    perspective: 1000px;
    width: 200px;
    height: 200px;
  }

  .inner-box, .inner-box * {
    position: absolute;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
  }

  .inner-box {
    animation: myani1 3s infinite linear;
  }

  .side {
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 80, 71, 1);
    vertical-align: middle;
    padding-top: 90px;
  }

  .top-side {
    transform: rotateX(90deg) translateZ(100px);
  }

  .bottom-side {
    transform: rotateX(90deg) translateZ(-100px);
  }

  .front-side {
    transform: translateZ(100px);
  }

  .rear-side {
    transform: rotateY(-180deg) translateZ(100px);
  }

  .left-side {
    transform: rotateY(-90deg) translateZ(100px);
  }

  .right-side {
    transform: rotateY(90deg) translateZ(100px);
  }

  @keyframes myani1 {
    0%{
      transform: rotateY(0deg) rotateX(-45deg);
    }
    50%{
      transform: rotateY(180deg) rotateX(-45deg);
    }
    100%{
      transform: rotateY(360deg) rotateX(-45deg);
    }
  }

</style>

最后来扯一扯代码实现的重点注意部分：

1.最外层div（class=outer-box）有一个 Perspective: 1000px; 这个是3D特效的外层何必属性，为啥呢？可以这样理解，一叶障目，怎么见泰山？你只能看到一个2D平面得叶子！！！要看到3D效果必须有啥？对，距离！！一定要有距离！讲白了就是3D特效距离屏幕（显示器的距离）

2.内层div(class=inner-box) 需要有transform-style: preserve-3d; 就是这个盒子的变换支持3d变换效果

3.最内层的6个div就代表正方体的六个面，分别是上，下，前，后，左，右的六个面

4.那么问题来了，这六个面一开始都是绝对定位在class=inner-box的div中，六个面都是重叠在一起的，怎么样才能把这六个面堆砌到正方体六个面的位置呢？

首先第一点需要理解的是：inner-box这个div的中心点是变换后的正方体的中心点

第一步：先把 top-side 变换到正确的位置，对应css样式为 .top-side{transform: rotateX(90deg) translateZ(100px)}, 解析如下(纯手画，请凑合看~~):

特别需要注意的是top-side经过了两次变换, 第二次变换时座标面得X轴，Y轴，Z轴和第一次变换的坐标面是完全不一样的（这里需要立体想象一下）

这样一来，top-side就变换到立方体的正确位置了，其他五个面也是同样的原理，不再赘述，这时可能还有同学不太清楚3D平面的rotate和translate是咋回事，看下图：

首先transform 变换的原点默认是（center, cennter），也就是几何中心点（上图中的“O”）

以Top-side是怎么到正确位置为例，上面这个面（面上写着一个字“top side”）假如经过 transform: rotateX(90deg), 是做了什么变换呢？

就是围绕X轴旋转90度，这个时候面会和XOZ这个面重叠（“top side”字样是朝着Y轴的正方向），但中心点还在“O”的位置，再经过translateZ(100px)，有做了什么变换呢？

这时就是以上一次变换的结果重新确定X轴，Y轴，Z轴了，translateZ就有点像“一箭穿心”的感觉，平面保持和Z轴垂直的同时, 中心点“O”沿着Z轴移动100px，这样Top side就跑到了正确的位置

以上Top side是怎么变换到正确的位置就一目了然额把？

最后就是class=inner-box这个div添加一个animation, 就可以看到一个选装的立方体了。

人的认知和理解总是有限的，如有错误请指出，如有更好的方法也请不吝提出共同学习~~~谢谢~~~

刷新页面返回顶部