我用CSS写了个会转的魔方

HolyKnightIX
292 阅读1分钟

用毕生所学的cCSS知识写了个魔方😀，暂时还用不能用js来拧它，以后或许可以实现

主要思路是用CSS的3D转换来让一个立体的盒子动起来

1、先使用3D坐标位移创建一个正方体盒子

   <style>
    body {
      background-color: #8f8888;
    }

    /* 魔方盒子 */
    .cube {
      position: relative;
      width: 610px;
      height: 610px;
      margin: 200px auto;
      /* 一定要使用transform-style: preserve-3d来呈现立体图形 */
      transform-style: preserve-3d;
      /* 设置动画 */
      animation: cube 7s infinite linear alternate;
    }

    /* 魔方内的小盒子（魔方的六个面） */
    .cube div {
      position: absolute;
      top: 0;
      left: 0;
      width: 610px;
      height: 610px;
    }

    @keyframes cube {
      from {}

      to {
        transform: rotateX(720deg) rotateY(720deg);
      }
    }

    /* 魔方正面 */
    .front {
      position: relative;
      transform: translateZ(305px);
      background-color: orange;
      border: 5px solid #494848;
    }

    /* 魔方背面 */
    .back {
      background-color: red;
      transform: translateZ(-305px);
      border: 5px solid #494848;
    }

    /* 魔方左面 */
    .left {
      background-color: green;
      transform: translateX(-305px) rotateY(90deg);
      border: 5px solid #494848;
    }

    /* 魔方右面 */
    .right {
      background-color: blue;
      transform: translateX(305px) rotateY(90deg);
      border: 5px solid #494848;
    }

    /* 魔方上面 */
    .top {
      background-color: yellow;
      transform: translateY(-305px) rotateX(90deg);
      border: 5px solid #494848;
    }

    /* 魔方底面 */
    .bottom {
      background-color: white;
      border: 5px solid #494848;
      transform: translateY(305px) rotateX(90deg);
    }
  </style>

  /* 魔方盒子 */
  <div class="cube">
    <div class="front">
    </div>
    <div class="back">
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>

2、定义动画来让魔方旋转

    @keyframes cube {
      from {}

      to {
        transform: rotateX(720deg) rotateY(720deg);
      }
    }

box.gif

3、再加上魔方的格子

     .cube .inside {
      position: absolute;
      top: 200px;
      left: 0;
      width: 610px;
      height: 5px;
      background-color: #494848;
    }

    .cube .inside2 {
      position: absolute;
      top: 405px;
      left: 0;
      width: 610px;
      height: 5px;
      background-color: #494848;
    }

    .cube .inside3 {
      position: absolute;
      top: 0;
      left: 205px;
      width: 5px;
      height: 610px;
      background-color: #494848;
    }

    .cube .inside4 {
      position: absolute;
      top: 0;
      left: 405px;
      width: 5px;
      height: 610px;
      background-color: #494848;
    } 

<body>
  <div class="cube">
    <div class="front">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="back">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="left">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="right">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="top">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="bottom">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
  </div>
</body>

cube.gif

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立体呈现</title>
  <style>
    body {
      background-color: #8f8888;
    }

    /* 魔方盒子 */
    .cube {
      position: relative;
      width: 610px;
      height: 610px;
      margin: 200px auto;
      transform-style: preserve-3d;
      animation: cube 7s infinite linear alternate;
    }

    /* 魔方内的小盒子（魔方的六个面） */
    .cube div {
      position: absolute;
      top: 0;
      left: 0;
      width: 610px;
      height: 610px;
    }

    @keyframes cube {
      from {}

      to {
        transform: rotateX(720deg) rotateY(720deg);
      }
    }

    /* 魔方正面 */
    .front {
      position: relative;
      transform: translateZ(305px);
      background-color: orange;
      border: 5px solid #494848;
    }

    /* 魔方背面 */
    .back {
      background-color: red;
      transform: translateZ(-305px);
      border: 5px solid #494848;
    }

    /* 魔方左面 */
    .left {
      background-color: green;
      transform: translateX(-305px) rotateY(90deg);
      border: 5px solid #494848;
    }

    /* 魔方右面 */
    .right {
      background-color: blue;
      transform: translateX(305px) rotateY(90deg);
      border: 5px solid #494848;
    }

    /* 魔方上面 */
    .top {
      background-color: yellow;
      transform: translateY(-305px) rotateX(90deg);
      border: 5px solid #494848;
    }

    /* 魔方底面 */
    .bottom {
      background-color: white;
      border: 5px solid #494848;
      transform: translateY(305px) rotateX(90deg);
    }


     .cube .inside {
      position: absolute;
      top: 200px;
      left: 0;
      width: 610px;
      height: 5px;
      background-color: #494848;
    }

    .cube .inside2 {
      position: absolute;
      top: 405px;
      left: 0;
      width: 610px;
      height: 5px;
      background-color: #494848;
    }

    .cube .inside3 {
      position: absolute;
      top: 0;
      left: 205px;
      width: 5px;
      height: 610px;
      background-color: #494848;
    }

    .cube .inside4 {
      position: absolute;
      top: 0;
      left: 405px;
      width: 5px;
      height: 610px;
      background-color: #494848;
    } 
  </style>
</head>

<body>
  <div class="cube">
    <div class="front">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="back">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="left">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="right">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="top">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
    <div class="bottom">
      <div class="inside"></div>
      <div class="inside2"></div>
      <div class="inside3"></div>
      <div class="inside4"></div>
    </div>
  </div>
</body>

</html>
avatar
文章
阅读
粉丝