純CSS實現立方體旋轉

本文轉載自查看原文 2018-11-26 21:44 1259 CSS

下面為通過CSS動畫實現的立方體旋轉，可以改變CSS代碼中關鍵幀定義（@keyframes）來改變立方體的旋轉方式

HTML部分：

<body class="body">
  <div class="rect-wrap">   <!-- //舞台元素，設置perspective，讓其子元素獲得透視效果。 -->
    <div class="container">    <!-- //容器，設置transform-style: preserve-3d，讓其子元素在3D空間呈現 -->
        <div class="top slide">1</div>   <!-- //立方體的六個面 -->
        <div class="bottom slide">2</div>
        <div class="left slide">3</div>
        <div class="right slide">4</div>
        <div class="front slide">5</div>
        <div class="back slide">6</div>
    </div>
  </div>
</body>

CSS部分：

<style>
      .rect-wrap {
        position: relative;
        perspective: 2000px;
      }
      .container {
        width: 400px;
        height: 400px;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 100px;  /* //設置3d空間的原點在平面中心再向Z軸移動200px的位置 */
        /* left: 50%;
        margin-left: -200px; */
        top: 100px;
      }
      .slide {
        width: 200px;
        height: 200px;
        position: absolute;
        background: #000;
        line-height: 200px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
      }
      .top {
        left: 100px;
        top: -100px;
        transform: rotateX(-90deg);
        transform-origin: bottom;
        background: red;
      }
      .bottom {
        left: 100px;
        bottom: -100px;
        transform: rotateX(90deg);
        transform-origin: top;
        background: grey;
      }
      .left {
        left: -100px;
        bottom: 100px;
        transform: rotateY(90deg);
        transform-origin: right;
        background: green;
      }
      .right {
        left: 300px;
        bottom: 100px;
        transform: rotateY(-90deg);
        transform-origin: left;
        background: yellow;
      }
      .front {
        left: 100px;
        top: 100px;
        transform: translateZ(200px);
        background: black;
      }
      .back {
        left: 100px;
        top: 100px;
        transform: translateZ(0);;
        background: blue;
      }
      @keyframes rotate-frame {
        0% {
            transform: rotateX(0deg) rotateY(0deg);
        }
        10% {
            transform: rotateX(0deg) rotateY(180deg);
        }
        20% {
            transform: rotateX(-180deg) rotateY(180deg);
        }
        30% {
            transform: rotateX(-360deg) rotateY(180deg);
        }
        40% {
            transform: rotateX(-360deg) rotateY(360deg);
        }
        50% {
            transform: rotateX(-180deg) rotateY(360deg);
        }
        60% {
            transform: rotateX(90deg) rotateY(180deg);
        }
        70% {
            transform: rotateX(0) rotateY(180deg);
        }
        80% {
            transform: rotateX(90deg) rotateY(90deg);
        }
        90% {
            transform: rotateX(90deg) rotateY(0);
        }
        100% {
            transform: rotateX(0) rotateY(0);
        }
      }
      .container{
        animation: rotate-frame 30s linear infinite;
      }
    </style>

以上代碼實現的效果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3實現旋轉立方體 CSS3實現立方體基於css3新屬性transform及原生js實現鼠標拖動3d立方體旋轉解惑：如何使用html+css+js實現旋轉相冊，立方體相冊等動畫效果 CSS3實現嵌套立方體旋轉的3D效果 CSS3的3D屬性及實現旋轉立方體的方法詳解 CSS3景深、三維變換屬性及旋轉三維立方體的實現 css3制作旋轉立方體相冊 css3之3D 旋轉立方體與哆啦A夢通過C#腳本實現旋轉的立方體