css3 实现立方体并旋转动态效果_css3立方体旋转效果-CSDN博客

本文链接：https://blog.csdn.net/dagedezhiyin/article/details/147770302

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>透明立方体 + 中心数字（呼吸缩放效果）</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f0f0f0;
        perspective: 800px;
      }
      .cube {
        position: relative;
        width: 150px;
        height: 150px;
        transform-style: preserve-3d;
        animation: rotate 4s infinite ease-out;
      }
      .face {
        position: absolute;
        width: 150px;
        height: 150px;
        background: rgba(46, 179, 255, 0.03);
        border: 2px solid rgba(26, 157, 232, 0.81);
      }
      .front {
        transform: translateZ(75px);
      }
      .back {
        transform: rotateY(180deg) translateZ(75px);
      }
      .right {
        transform: rotateY(90deg) translateZ(75px);
      }
      .left {
        transform: rotateY(-90deg) translateZ(75px);
      }
      .top {
        transform: rotateX(90deg) translateZ(75px);
      }
      .bottom {
        transform: rotateX(-90deg) translateZ(75px);
      }

      .corner {
        position: absolute;
        width: 20px;
        height: 20px;
        transform-style: preserve-3d;
      }
      .line-x,
      .line-y {
        position: absolute;
        background: rgba(135, 195, 228, 0.8);
      }
      .line-x {
        width: 20px;
        height: 2px;
        left: 0;
        top: 0;
      }
      .line-y {
        width: 2px;
        height: 20px;
        left: 0;
        top: 0;
      }

      /* 八个角的位置与方向 */
      .corner1 {
        transform: translate3d(-5px, -5px, 75px);
      }
      .corner2 {
        transform: translate3d(-5px, -5px, -75px);
      }
      .corner3 {
        transform: translate3d(140px, -5px, 75px) rotateY(180deg);
      }
      .corner4 {
        transform: translate3d(140px, -5px, -75px) rotateY(180deg);
      }
      .corner5 {
        transform: translate3d(-5px, 140px, -75px) rotateX(180deg);
      }
      .corner6 {
        transform: translate3d(-5px, 140px, 75px) rotateX(-180deg);
      }
      .corner7 {
        transform: translate3d(140px, 140px, -75px) rotateY(180deg)
          rotateX(-180deg);
      }
      .corner8 {
        transform: translate3d(140px, 140px, 75px) rotateY(180deg)
          rotateX(-180deg);
      }

      .center-number {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        color: rgba(26, 157, 232, 0.9);
        font-weight: bold;
        pointer-events: none;
        animation: breathe 2s infinite ease-in-out;
      }

      @keyframes rotate {
        from {
          transform: rotateX(0deg) rotateY(0deg);
        }
        to {
          transform: rotateX(0deg) rotateY(360deg);
        }
      }

      @keyframes breathe {
        0%,
        100% {
          transform: translate(-50%, -50%) scale(1);
        }
        50% {
          transform: translate(-50%, -50%) scale(1.3);
        }
      }
    </style>
  </head>
  <body>
    <div class="cube">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>

      <!-- 中心数字 -->
      <div class="center-number">1</div>

      <!-- 八个直角标记 -->
      <div class="corner corner1">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner2">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner3">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner4">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner5">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner6">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner7">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
      <div class="corner corner8">
        <div class="line-x"></div>
        <div class="line-y"></div>
      </div>
    </div>
  </body>
</html>