漂漂亮亮的HTML立方体
<style>#prevBox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: beige; display: none; padding: 0; overflow: hidden; z-index: 1000; margin: 0; }
#prevBox::after { position: absolute; content: '关闭预览'; bottom: 10px; left: calc(50% - 40px); padding: 0 4px; width: 80px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #efe; border-radius: 6px; background: #eee; font-size: 14px; box-shadow: 2px 2px 6px rgba(0,0,0,.25); cursor: pointer; }
iframe { position: relative; width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box; margin: 0; }
</style>
<div id="prevBox"></div>
<div id="hEdiv"><pre id="hEpre">
<style>
#papa {
margin: 20px auto;
width: 1024px;
height: 640px;
border: 1px solid gray;
perspective: 800px;
display: grid;
place-items: center;
position: relative;
}
#papa div {
display: inherit;
place-items: inherit;
}
#box {
position: absolute;
width: 150px;
height: 150px;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(45deg) rotateZ(0);
animation: rot linear 16s infinite;
--xx: 75px;
}
#front { transform: translateZ(var(--xx)); --bg: red; }
#back { transform: rotateY(180deg) translateZ(var(--xx)); --bg: purple; }
#left { transform: rotateY(-90deg) translateZ(var(--xx)); --bg: orange; }
#right { transform: rotateY(90deg) translateZ(var(--xx)); --bg: green; }
#top { transform: rotateX(90deg) translateZ(var(--xx)); --bg: cyan; }
#bottom { transform: rotateX(-90deg) translateZ(var(--xx)); --bg: blue; }
.board {
position: absolute;
width: 100%;
height: 100%;
background: var(--bg);
opacity: 0.5;
}
.board::before, .board::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(45deg, snow, yellow, snow) no-repeat center/4px 100%;
}
.board::after {
transform: rotate(90deg);
}
@keyframes rot {
to {
transform: rotateX(315deg) rotateY(405deg) rotateZ(360deg);
}
}
</style>
<div id="papa">
<div id="box">
<div id="front" class="board"></div>
<div id="back" class="board"></div>
<div id="left" class="board"></div>
<div id="right" class="board"></div>
<div id="top" class="board"></div>
<div id="bottom" class="board"></div>
</div>
</div>
</pre></div>
<blockquote><button id="btnPrev">运行代码</button></blockquote>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
const preView = (htmlCode, targetBox) => {
if (targetBox.innerHTML) return;
const iframe = document.createElement('iframe');
htmlCode = htmlCode + '<style>body {margin: 0; }</style>';
iframe.srcdoc = htmlCode;
targetBox.appendChild(iframe);
targetBox.style.display = 'block';
targetBox.onclick = () => {
targetBox.innerHTML = '';
targetBox.style.display = 'none';
}
};
const value = hEpre.textContent;
btnPrev.onclick = () => preView(value, prevBox);
</script> 因为最近钱少，买不起一元钱一支的 502 胶水，俺又特别担心立方体会散架，就使用了 .board 类的两个伪元素为每一个面都系上绳子，没想到效果会辣么酷！ 此前制作过的有代表性的HTML立方体：
一个闭合立方体演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
闭合立方体动画演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!
立方体也可以关联音乐 - 欢乐水吧 - 花潮论坛 - Powered by Discuz!
马黑黑 发表于 2025-7-8 19:47
因为最近钱少，买不起一元钱一支的 502 胶水，俺又特别担心立方体会散架，就使用了 .board 类的两个伪元素 ...
漂亮！看来有时钱少也能促成好事呢{:4_173:} 杨帆 发表于 2025-7-8 20:02
漂亮！看来有时钱少也能促成好事呢
对，银子不是多多益善 没想到黑黑都做了这么多个立方体了呢。
都是做成立体空间形体的思路，这个里面还加上了绑带，有意思{:4_199:} 在html里，每一个面都要引用class="board"呢，各个面都在这一定的透明度，晶莹剔透的{:4_199:} 红影 发表于 2025-7-8 20:51
在html里，每一个面都要引用class="board"呢，各个面都在这一定的透明度，晶莹剔透的
多面体里立方体最优规律，最容易实现 红影 发表于 2025-7-8 20:48
没想到黑黑都做了这么多个立方体了呢。
都是做成立体空间形体的思路，这个里面还加上了绑带，有意思{:4_19 ...
稳固 马黑黑 发表于 2025-7-8 21:48
多面体里立方体最优规律，最容易实现
嗯嗯，它的形态规规整整的，各面相互垂直。 马黑黑 发表于 2025-7-8 21:48
稳固
其实是画出每一个面和绑带，在Html里把画好的展现出来。 红影 发表于 2025-7-8 22:28
其实是画出每一个面和绑带，在Html里把画好的展现出来。
{:4_181:} 红影 发表于 2025-7-8 22:26
嗯嗯，它的形态规规整整的，各面相互垂直。
规律性极强 马黑黑 发表于 2025-7-9 13:59
有了绑带就不能加文字了{:4_173:} 马黑黑 发表于 2025-7-9 14:01
规律性极强
最规整的形状呢。 红影 发表于 2025-7-9 22:33
最规整的形状呢。
这是结构使然 红影 发表于 2025-7-9 22:33
有了绑带就不能加文字了
一样可以加的：绑带颜色弄成带透明度的 马黑黑 发表于 2025-7-9 22:56
这是结构使然
它最规整，最奇妙的是球体，里面含有PI 。 马黑黑 发表于 2025-7-9 22:57
一样可以加的：绑带颜色弄成带透明度的
哦 ，也是，这样也就不影响了。 红影 发表于 2025-7-9 23:34
哦 ，也是，这样也就不影响了。
我试过不影响的