3D魔方盒子

蓝桉ྀ

已于 2022-08-01 20:24:12 修改

阅读量104

点赞数

文章标签： 3d css css3

于 2022-08-01 20:22:50 首次发布

本文链接：https://blog.csdn.net/qq_51201134/article/details/126109138

版权

代码如下：


<!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>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        transform-style: preserve-3d;
        animation: rotate 2s infinite linear;
      }
      .box > div {
        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url(./img/666.jpg);
        /* background-repeat: no-repeat; */
        background-size: cover;
        border-radius: 8px;
      }
      .box1 {
        background-position: 0 0;
        transform: rotateY(90deg) translateZ(50px);
      }

      .box2 {
        background-position: -100px 0;
        transform: rotateY(-90deg) translateZ(50px);
      }
      .box3 {
        background-position: -300px 0;
        transform: rotateX(90deg) translateZ(50px);
      }
      .box4 {
        background-position: -400px 0;
        transform: rotateX(-90deg) translateZ(50px);
      }
      .box5 {
        background-position: -500px 0;
        transform: rotateZ(90deg) translateZ(50px);
      }
      .box6 {
        background-position: -600px 0;
        transform: rotateZ(0deg) translateZ(50px);
      }
      @keyframes rotate {
        from {
          transform: rotateX(0) rotateY(0) rotateZ(0);
        }
        to {
          transform: rotateX(1turn) rotateY(1turn) rotateZ(0);
        }
      }
      #dice:checked + label .box {
        animation-play-state: paused;
      }
      #dice {
        display: none;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="dice" />
    <label for="dice">
      <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
      </div>
    </label>
  </body>
</html>