[游戏开发] 利用CSS3动画实现立方体旋转爆炸效果

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 利用CSS3动画实现立方体旋转爆炸效果 -> 正文阅读

[游戏开发]利用CSS3动画实现立方体旋转爆炸效果

HTML代码如下

<body>
    <div class="wrap">
        <div class="cube">
          <div class="front margin">
            外-前
          </div>
          <div class="back margin">
            外-后
          </div>
          <div class="top margin">
            外-上
          </div>
          <div class="bottom margin">
            外-下
          </div>
          <div class="left margin">
            外-左
          </div>
          <div class="right margin">
            外-右
          </div>

          <div class="padding-front padding">
              内-前
          </div>
          <div class="padding-back padding">
              内-后
          </div>
          <div class="padding-top padding">
              内-上
          </div>
          <div class="padding-bottom padding">
              内-下
          </div>
          <div class="padding-left padding">
              内-左
          </div>
          <div class="padding-right padding">
              内-右
          </div>
        </div>
      </div>

CSS如下

.wrap {
    margin-top: 150px;
  }

  /*设置元素在3D空间呈现，设置正方体3D旋转角度*/
  .cube {
    margin-top: 150px;
    perspective: 1000px;
    margin: auto;
    position: relative;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
  }
   
  .cube > div.margin {
    position: absolute;
    text-align: center;
    line-height: 200px;
    box-sizing: border-box;
    border: 1px solid rgb(106, 228, 68);
    height: 100%;
    width: 100%;
    background-color: rgba(135, 207, 235, 0.582);
  }

  .cube > div.padding{
    position: absolute;
    text-align: center;
    line-height: 100px;
    height: 50%;
    width: 50%;
    top: 25%;
    left: 25%;
    background-color: rgba(105, 90, 205, 0.466);
  }

  /*外立方体*/
  .front {
    transform: translateZ(100px);
  }
   
  .back {
    transform: translateZ(-100px);
  }
   
  .right {
    transform: translateX(100px) rotateY(-90deg);
  }
   
  .left {
    transform: translateX(-100px) rotateY(90deg);
  }
   
  .top {
    transform: translateY(-100px) rotateX(90deg);
  }
   
  .bottom {
    transform: translateY(100px) rotateX(-90deg);
  }

  /*内立方体*/
  .padding-front {
    transform: translateZ(50px);
  }

  .padding-back {
    transform: translateZ(-50px);
  }
   
  .padding-right {
    transform: translateX(50px) rotateY(-90deg);
  }
   
  .padding-left {

    transform: translateX(-50px) rotateY(90deg);
  }
   
  .padding-top {
    transform: translateY(-50px) rotateX(90deg);
  }
   
  .padding-bottom {
    transform: translateY(50px) rotateX(-90deg);
  }


  /*立方体旋转*/
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
 
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
.cube {
  animation: rotate 10s infinite linear;
}

/* 爆炸展开 */
.wrap .cube:hover .front {
    transform: translateZ(200px);
  }
   
  .wrap .cube:hover .back {
    transform: translateZ(-200px);
  }
   
  .wrap .cube:hover .right {
    transform: translateX(200px) rotateY(-90deg);
  }
   
  .wrap .cube:hover .left {
    transform: translateX(-200px) rotateY(90deg);
  }
   
  .wrap .cube:hover .top {
    transform: translateY(-200px) rotateX(90deg);
  }
   
  .wrap .cube:hover .bottom {
    transform: translateY(200px) rotateX(-90deg);
  }
  .cube > div {
    transition: transform 0.5s ease-in;
  }

?效果如下：

3D立方体效果