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

闭合立方体动画演示

本帖最后由 马黑黑 于 2022-4-10 20:33 编辑 <br /><br /><style>

body { perspective: 3000px; }

.cube {
        --x: 120px;
        --xx: -60px;
        margin: 100px auto;
        width: var(--x);
        height: var(--x);
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
        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: .85;
}

.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(-720deg) rotateY(360deg); }
}

</style>

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

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

代码：
<style>

body { perspective: 3000px; }

.cube {
        --x: 120px;
        --xx: -60px;
        margin: 100px auto;
        width: var(--x);
        height: var(--x);
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0;
        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: .85;
}

.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(-720deg) rotateY(360deg); }
}

</style>

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


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

这个和那个镇宫之宝有点像，这个是6面颜色各不相同{:4_187:}

梦油 发表于 2022-4-10 21:10

黑黑朋友晚上好！俺看不出什么门道，但却深深地赞叹你的高潮技艺。

马黑黑 发表于 2022-4-10 21:15

红影 发表于 2022-4-10 21:08
这个和那个镇宫之宝有点像，这个是6面颜色各不相同

立方体都一样，只是换一个写法，让它的实现简单一点

马黑黑 发表于 2022-4-10 21:15

梦油 发表于 2022-4-10 21:10
黑黑朋友晚上好！俺看不出什么门道，但却深深地赞叹你的高潮技艺。

谢谢夸奖

加林森 发表于 2022-4-10 22:02

现在再来学习

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

加林森 发表于 2022-4-10 22:02
现在再来学习

队长早

加林森 发表于 2022-4-11 10:16

马黑黑 发表于 2022-4-11 07:32
队长早

老黑上午好。

红影 发表于 2022-4-11 10:18

马黑黑 发表于 2022-4-10 21:15
立方体都一样，只是换一个写法，让它的实现简单一点

嗯嗯，多点写法更好，正好多跟着学学{:4_199:}

梦油 发表于 2022-4-11 10:28

马黑黑 发表于 2022-4-10 21:15
谢谢夸奖

黑黑朋友早晨好！你真是难得的人才啊！

马黑黑 发表于 2022-4-11 12:00

梦油 发表于 2022-4-11 10:28
黑黑朋友早晨好！你真是难得的人才啊！

{:4_190:}

马黑黑 发表于 2022-4-11 12:01

红影 发表于 2022-4-11 10:18
嗯嗯，多点写法更好，正好多跟着学学

思路不止一种的

马黑黑 发表于 2022-4-11 12:01

加林森 发表于 2022-4-11 10:16
老黑上午好。

中午好

加林森 发表于 2022-4-11 12:30

马黑黑 发表于 2022-4-11 12:01
中午好

中午好。{:4_190:}

梦油 发表于 2022-4-11 13:53

马黑黑 发表于 2022-4-11 12:00


黑黑朋友下午好！俺希望尽可能多地欣赏到你的作品。

马黑黑 发表于 2022-4-11 14:15

梦油 发表于 2022-4-11 13:53
黑黑朋友下午好！俺希望尽可能多地欣赏到你的作品。

放心，主要时间许可

梦油 发表于 2022-4-11 15:01

马黑黑 发表于 2022-4-11 14:15
放心，主要时间许可

太好了，黑黑朋友。

马黑黑 发表于 2022-4-11 17:52

梦油 发表于 2022-4-11 15:01
太好了，黑黑朋友。

一切正常

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

马黑黑 发表于 2022-4-11 12:01
思路不止一种的

更习惯于这个，没有JS的感觉好理解{:4_173:}
页: [1] 2
查看完整版本: 闭合立方体动画演示