马黑黑 发表于 2022-4-10 18:36

一个闭合立方体演示

本帖最后由 马黑黑 于 2022-4-14 08:12 编辑 <br /><br /><style>

.mama { width: 760px; height: 560px; perspective: 2000px; }

.lifangti {
      --x: 160px;
      --xx: -80px;
      margin: 100px auto;
      width: var(--x);
      height: var(--x);
      transform-style: preserve-3d;
      transform-origin: 50% 50% 0;
      transform: rotateX(20deg) rotateY(-20deg);
      animation: rot 10s linear infinite;
}

.lifangti div {
      position: absolute;
      left: 0; top: 0; width: inherit; height: inherit;
      font: 2em / var(--x) Arial;
      color: white;
      text-align: center;
      text-shadow: 1px 1px 2px #000;
      opacity: .8;
}

.lifangti div:nth-child(1) { background: tan; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(2) { background: black; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(3) { background: green; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(4) { background: magenta; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(5) { background: red; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.lifangti div:nth-child(6) {background: green; transform: rotateX(-90deg) translateZ(var(--xx)); }

@keyframes rot {
      to { transform: rotateX(360deg) rotateY(720deg); }
}

</style>

<div class="mama">
        <div class="lifangti">
              <div>前</div>
                <div>左</div>
              <div>后</div>
                <div>右</div>
              <div>底</div>
                <div>顶</div>
        </div>
</div>

马黑黑 发表于 2022-4-10 18:37

完整代码：
<style>
/* 景深，建议在. cube 的父窗体做 */
body { perspective: 2000px; }
/* ①立方体包装层 --x变量值正整数，它也是立方体的宽高
尺寸；②--xx变量值是顶部面板使用，取值取 --x 的一半
*/
.cube {
        --x: 160px;
        --xx: -80px;
        margin: 100px auto;
        width: var(--x);
        height: var(--x);
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
        transform: rotateX(20deg) rotateY(-20deg);
        /*animation: rot 10s linear infinite;*/
}
/* 六块面板共同属性 */
.cube div {
        position: absolute;
        left: 0; top: 0; width: inherit; height: inherit;
        font: 2em / var(--x) Arial;
        color: white;
        text-align: center;
        text-shadow: 1px 1px 2px #000;
        opacity: .8;
}
/*        六个面板独自属性 ①六个面板按Y轴旋转并沿Z轴拉开距离 ②注意顶部和底部面板的
设置：旋转-90deg、顶部以负值往Z轴拉开 ③ 六块面板按顺序依次为前左后右底上
*/
.cube div:nth-child(1) { background: tan; transform: rotateY(0deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(2) { background: black; transform: rotateY(90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(3) { background: green; transform: rotateY(180deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(4) { background: magenta; transform:rotateY(270deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(5) { background: red; transform: rotateX(-90deg) translateZ(calc(var(--x) / 2)); }
.cube div:nth-child(6) {background: green; transform: rotateX(-90deg) translateZ(var(--xx)); }
/* 旋转动画 */
@keyframes rot {
        to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>

<div class="cube">
        <div>前</div>
        <div>左</div>
        <div>后</div>
        <div>右</div>
        <div>底</div>
        <div>顶</div>
</div>

马黑黑 发表于 2022-4-10 18:43

旋转起来能观察的更全面，3d的效果也很漂亮

马黑黑 发表于 2022-4-10 18:48

现在这个静态倾斜，有两块面板的颜色看不出来

马黑黑 发表于 2022-4-10 18:49

动画的旋转角度还可以加大，比如720deg

加林森 发表于 2022-4-10 19:03

来学习

上海朝阳 发表于 2022-4-10 19:45

哈哈，高科技，学不会

马黑黑 发表于 2022-4-10 20:16

上海朝阳 发表于 2022-4-10 19:45
哈哈，高科技，学不会

晚上好！我们不必学会一切，分工不同，各会各的

红影 发表于 2022-4-10 21:02

漂亮。这个要是转起来的话，准备绕着哪个点转呢{:4_204:}

马黑黑 发表于 2022-4-11 07:31

红影 发表于 2022-4-10 21:02
漂亮。这个要是转起来的话，准备绕着哪个点转呢

已经定义了基点了，是默认的

红影 发表于 2022-4-11 11:33

马黑黑 发表于 2022-4-11 07:31
已经定义了基点了，是默认的

是绕重心旋转的吧？

马黑黑 发表于 2022-4-11 11:58

红影 发表于 2022-4-11 11:33
是绕重心旋转的吧？

默认是自己的中心

红影 发表于 2022-4-12 23:29

马黑黑 发表于 2022-4-11 11:58
默认是自己的中心

嗯嗯，知道了{:4_204:}

马黑黑 发表于 2022-4-12 23:58

红影 发表于 2022-4-12 23:29
嗯嗯，知道了

{:4_190:}

马黑黑 发表于 2022-4-14 07:56

哪里出了问题坍塌了

马黑黑 发表于 2022-4-14 08:06

马黑黑 发表于 2022-4-14 07:56
哪里出了问题坍塌了

坍塌原因找到，已修复。

但理解不了这个原因。具体人·原因是设置景深的对象，我直接把景深放在 body 选择器里，现在改为套一个外框，景深放在外框。估计与发帖者对body的权限有关，但还是不能理解。
页: [1]
查看完整版本: 一个闭合立方体演示