镇宫之宝献给东篱

马黑黑 发表于 2022-4-8 12:20

马黑黑 发表于 2022-4-8 12:20

代码：
<style>
.cude {
--xyz: 100px;
--bb: -50px;
width: var(--xyz);
height: var(--xyz);
position: relative;
margin: 100px auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
transform-origin: 50% 50% 0;
animation: rot 10s linear infinite;
}
.pae {
position: absolute;
left: 0; top: 0;
width: var(--xyz); height: var(--xyz);
background: red;
opacity: .2;
font: bold 40px / var(--xyz) Arial;
color: #fff;
text-align: center;
text-shadow: 1px 1px 2px #000;
border:1px solid #333;
}
.front { transform: rotateY(0) translateZ(calc(var(--xyz) / 2)); }
.back { transform: translateZ(var(--bb)) rotateY(180deg); }
.left { transform: rotateY(-90deg) translateZ(calc(var(--xyz) / 2)); }
.right { transform: rotateY(90deg) translateZ(calc(var(--xyz) / 2)); }
.top { transform: rotateX(90deg) translateZ(calc(var(--xyz) / 2)); }
.bottom { transform: rotateX(90deg) translateZ(var(--bb)); }

@-webkit-keyframes rot {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
</style>

<div class="cude">
<div class="pae front">東</div>
<div class="pae left">南</div>
<div class="pae right">西</div>
<div class="pae bottom">北</div>
<div class="pae top">中</div>
<div class="pae back">宮</div>
</div>

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

这是3d效果的立方体。改变立方体大小，只需改变 .cube 类选择器的值：

--xyz: 100px;
--bb: -50px;

注意 --bb 变量值的确定方法： --xyz 数值的一半

马黑黑 发表于 2022-4-8 12:31

CSS的 3d 渲染用到：

① transform-style: preserve-3d; ：必须，定义元素为3d渲染类型，定义放在立方体的父层盒子；
② transform 的 rotateX、rotateY 和 rotateZ ：围绕 xyz 轴旋转；
③ transform 的 translateX、translateY、translateZ ：围绕 xyz 轴位移；
④ 角度（deg）和位移的计算；
⑤ 还需要加入景深 perspective（cube之上的父层窗体），本例木有加

马黑黑 发表于 2022-4-8 12:33

@keyframes 动画作用于 .cube 盒子（立方体主体元素，各面的外层，起归拢各面的作用）

闲言不语 发表于 2022-4-8 13:07

这是三缺一的节奏{:4_199:}

加林森 发表于 2022-4-8 13:09

哇，老黑给老兄制作的镇宫之大印啊，挺好看的，还是透明的。

闲言不语 发表于 2022-4-8 13:09

这立方体也可以用代码玩，黑黑真够棒！{:4_199:}

马黑黑 发表于 2022-4-8 13:12

闲言不语发表于 2022-4-8 13:09
这立方体也可以用代码玩，黑黑真够棒！

支援东篱，不择手段{:5_117:}

马黑黑 发表于 2022-4-8 13:13

加林森发表于 2022-4-8 13:09
哇，老黑给老兄制作的镇宫之大印啊，挺好看的，还是透明的。

立方体透视效果

马黑黑 发表于 2022-4-8 13:13

闲言不语发表于 2022-4-8 13:07
这是三缺一的节奏

缺一个你想与之同框的吧{:5_117:}

加林森 发表于 2022-4-8 13:14

马黑黑发表于 2022-4-8 13:13
立方体透视效果

挺好看的。

闲言不语 发表于 2022-4-8 13:18

马黑黑发表于 2022-4-8 13:13
缺一个你想与之同框的吧

俺只想把老东头喊来搓几把{:4_189:}

马黑黑 发表于 2022-4-8 13:27

闲言不语发表于 2022-4-8 13:18
俺只想把老东头喊来搓几把

哦，手痒痒了

马黑黑 发表于 2022-4-8 13:27

加林森发表于 2022-4-8 13:14
挺好看的。

还行吧

加林森 发表于 2022-4-8 13:30

马黑黑发表于 2022-4-8 13:27
还行吧

你太客气了

樵歌发表于 2022-4-8 13:54

真舍得。宝贝呵

红影发表于 2022-4-8 14:34

这个要分别设置上下前后左右的动画啊，太需要空间想象力了{:4_173:}

梦油发表于 2022-4-8 15:40

黑黑朋友多才多艺，羡慕！

马黑黑 发表于 2022-4-8 18:20

加林森发表于 2022-4-8 13:30
你太客气了

应该的应该的

页: [1] 2

花潮论坛's Archiver

镇宫之宝献给东篱