本帖最后由 加林森 于 2022-4-14 14:03 编辑 <br /><br />大猫咪 发表于 2021-9-11 20:40
嗯嗯
好猫猫！{:4_171:}
<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>
加林森 发表于 2021-9-11 19:26
哈哈哈哈，好啊！
时间真快，马上周六就没了，还剩一天能瞎玩了{:4_173:}
本帖最后由 加林森 于 2022-4-14 14:04 编辑 <br /><br />红影 发表于 2021-9-11 20:48
时间真快，马上周六就没了，还剩一天能瞎玩了
好好玩吧。开心就好！
加林森 发表于 2021-9-11 20:50
好好玩吧。开心就好！
在家可以想躺着就躺着，先观看电视就看电视，觉得特别自在{:4_173:}
红影 发表于 2021-9-11 21:16
在家可以想躺着就躺着，先观看电视就看电视，觉得特别自在
嗯嗯，只要自己舒服就行。
加林森 发表于 2021-9-11 21:51
嗯嗯，只要自己舒服就行。
是啊，休息日特别舒服{:4_173:}
红影 发表于 2021-9-11 22:07
是啊，休息日特别舒服
嗯嗯，是的。