用HTML+CSS3写一个会旋转的魔方

最新推荐文章于 2022-07-22 17:59:07 发布

JellyDDD

最新推荐文章于 2022-07-22 17:59:07 发布

阅读量1k

点赞数

文章标签： css3 html animation

本文链接：https://blog.csdn.net/CSND7997/article/details/104044992

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        margin: 150px auto;
        position: relative;
        transform-style: preserve-3d;
     
        animation: rotate 10s linear infinite alternate; 
      }
      .before,
      .back,
      .top,
      .bottom,
      .left,
      .right {
        width: 300px;
        height: 300px;
        position: absolute;
      }
      .before {
        transform: translateZ(150px);
      }
      .back {
        /* transform: rotateY(180deg) translateZ(150px); */
        transform: translateZ(-150px);
      }
      .top {
        transform: rotateX(90deg) translateZ(150px);
      }
      .bottom {
        transform: rotateX(-90deg) translateZ(150px);
      }
      .left {
        transform: rotateY(-90deg) translateZ(150px);
      }
      .right {
        transform: rotateY(90deg) translateZ(150px);
      }
      .before ul li {
        background-color: green;
      }
      .back ul li {
        background-color: red;
      }
      .top ul li {
        background-color: pink;
      }
      .bottom ul li {
        background-color: blue;
      }
      .left ul li {
        background-color: yellow;
      }
      .right ul li {
        background-color: wheat;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li {
        margin: 5px;
        border-radius: 20px;
        font-size: 50px;
        width: 90px;
        height: 90px;
        float: left;
        text-align: center;
        line-height: 90px;
      }
      @keyframes rotate {
        0% {
          transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        20%{
          transform: rotateY(60deg) rotateX(60deg) rotateZ(60deg);
        }
        40% {
          transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        60%{
          transform: rotateY(-60deg) rotateX(-60deg) rotateZ(-60deg);
        }
        80% {
          transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
        }
        100%{
          transform: rotateY(60deg) rotateX(60deg) rotateZ(60deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="before">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
      <div class="back">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
      <div class="top">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
      <div class="bottom">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
      <div class="left">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
    </div>
  </body>
</html>