用CSS3实现的任意尺寸的立方体盒子

作者: FrankFang7 | 来源:发表于2022-11-04 13:57 被阅读0次

用CSS3实现的任意尺寸的立方体盒子
CSS3实现3D立方体
CSS3 3D盒子
纯css3实现旋转3D立方体骰子
CSS3 实现正方体
30three.js补间动画Tween.js和选择物体
CSS3 盒子阴影、尺寸、空间
3D立方体
CSS3积累(4) 画三角形和对话框
CSS3 弹性盒子(Flex Box)

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
  .scene {
    position: relative;
    width: 600px;
    height: 900px;
    background-color: #ddd2;

    --cube-color1: #fff;
    --cube-color2: #eee;
    --cube-color3: #aaa;
    --cube-color4: #ddd;
    --cube-color5: #ddd;
    --cube-color6: #bbb;
  }

  .transform3d {
    transform-style: preserve-3d;
    transform: translate3d(30%, -20%, 10vmin) perspective(5000px) rotateX(45deg) rotateY(0deg) rotateZ(30deg);
  }

  .square-box {
    width: var(--width);
    height: var(--height);    
    box-sizing: border-box;
    position: relative;
    transform-style: preserve-3d;
    margin: 100px auto;
  }

  .square-box>div {
    position: absolute;
    opacity: 0.7;
  }

  /*设置六面的视角*/
  .square-box>.front {
    width: var(--width);
    height: var(--height);
    transform: translateZ(var(--thick));
    background: red;
  }

  .square-box>.bottom {
    width: var(--width);
    height: var(--thick);
    transform: rotateX(270deg) translateZ(calc(var(--height) - var(--thick)));
    transform-origin: left bottom 0;
    background: green;
  }

  .square-box>.back {
    width: var(--width);
    height: var(--height);
    transform: translateZ(0);
    background: blue;
  }

  .square-box>.top {
    width: var(--width);
    height: var(--thick);
    transform: rotateX(90deg) translateZ(var(--thick));
    transform-origin: center center calc(var(--thick) / 2);
    background: yellow;
  }

  .square-box>.left {
    width: var(--thick);
    height: var(--height);
    transform: rotateY(270deg) translateZ(0);
    transform-origin: left center 0;
    background: purple;
  }

  .square-box>.right {
    width: var(--thick);
    height: var(--height);
    transform: rotateY(90deg) translateZ(calc(var(--width) - var(--thick)));
    background: orange;
    transform-origin: right center 0;
  }
</style>

<body>
  <div id="app">
    <div style="position: absolute; left: 1200px; top: 10px; z-index: 2;">
      <el-switch v-model="transform3d" active-color="#13ce66" inactive-color="#999">
      </el-switch>
    </div>
    <div class="scene" :class="{transform3d: transform3d}">
      <div class="square-box" style="--width: 50px; --height: 50px; --thick: 50px;">
        <div class="front"></div>
        <div class="bottom"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>

      <div class="square-box" style="--width: 100px; --height: 50px; --thick: 25px;">
        <div class="front"></div>
        <div class="bottom"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>

      <div class="square-box" style="--width: 200px; --height: 100px; --thick: 50px;">
        <div class="front"></div>
        <div class="bottom"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>

      <div class="square-box" style="--width: 100px; --height: 50px; --thick: 200px;">
        <div class="front"></div>
        <div class="bottom"></div>
        <div class="back"></div>
        <div class="top"></div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          transform3d: true
        }
      },
      methods: {
      }
    })
  </script>
</body>
</html>