一个闭合立方体演示

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-14 08:12 编辑

前

左

后

右

底

顶

马黑黑 · 发表于 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>