html5和css3实现3d正方体旋转-Toy模板网

这篇具有很好参考价值的文章主要介绍了html5和css3实现3d正方体旋转。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.创建一个div盒子：

<div class="container">
        <div class="cube">
          <div class="side front">前面</div>
          <div class="side back">后面</div>
          <div class="side top">顶部</div>
          <div class="side bottom">底部</div>
          <div class="side left">左侧</div>
          <div class="side right">右侧</div>
        </div>
      </div>

2.设置样式style，实现旋转功能：

1.设置六个面的宽，高，颜色等：

.side {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: rgba(190, 54, 23, 0.8);
  border: 1px solid #3a13d5;
}

2. 创建3D视角：

.container {
            margin-top: 200px;
            margin-left: 200px;
  perspective: 1000px;

3.使用动画让正方体旋转 :

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

4.设置六个面的坐标：

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

.back {
  transform: rotateY(180deg) translateZ(100px);
}

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

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

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

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

5.用动画keyframes让其旋转起来：文章来源地址https://www.toymoban.com/news/detail-783118.html

@keyframes spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

到了这里，关于html5和css3实现3d正方体旋转的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！