镇宫之宝献给东篱

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

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

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

x

東

南

西

北

中

宮

马黑黑 · 发表于 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之上的父层窗体），本例木有加