利用CSS3动画实现立方体旋转爆炸效果

江沉晚眠时尽

已于 2022-02-21 14:15:58 修改

阅读量657

点赞数

文章标签： css3 动画 css

于 2022-02-20 17:13:59 首次发布

本文链接：https://blog.youkuaiyun.com/cm200225/article/details/123032940

版权

本文详细介绍了如何使用HTML和CSS创建一个3D立方体，通过CSS3的transform属性实现旋转和动画效果，包括外立方体与内立方体的定位和样式。同时涵盖了关键的CSS样式和关键帧动画的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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立方体效果