我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
春节过后才注册的掘金账号，掘金真的太适合我了，为了参加活动，特意写了这个元宵节灯笼的案例
实现思路：
html结构如下：
<div class="box t-3d">
<!-- 顶部 -->
<div class="top t-3d">
<!-- 顶面 -->
<div class="mian liu bd"></div>
<!-- 6个立体面 -->
<div class="top-shu">祝</div>
<div class="top-shu">你</div>
<div class="top-shu">兔</div>
<div class="top-shu">年</div>
<div class="top-shu">大</div>
<div class="top-shu">吉</div>
<!-- 6个角饰品 -->
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
</div>
<!-- 主体 -->
<div class="content t-3d">
<!-- -->
<div class="con-shu"></div>
<div class="con-shu"></div>
<div class="con-shu"></div>
<div class="con-shu"></div>
<div class="con-shu"></div>
<div class="con-shu"></div>
</div>
<!-- 底部 -->
<div class="bottom t-3d">
<!-- 底面 -->
<div class="mian liu bd"></div>
<!-- 6个立体面 -->
<div class="top-shu">掘</div>
<div class="top-shu">金</div>
<div class="top-shu">多</div>
<div class="top-shu">多</div>
<div class="top-shu">愿</div>
<div class="top-shu">你</div>
<!-- 6个角饰品 -->
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<div class="jiao"></div>
<!-- 吊坠 -->
<div class="kou"></div>
<div class="kou"></div>
<div class="kou"></div>
<div class="kou"></div>
<div class="kou"></div>
<div class="kou"></div>
</div>
</div>
- 整体实现思路本质上就是，通过CSS 控制div 盒子的旋转和位移， 下面分析实现思路和难点， 具体样式请参照代码
// 类似这样
transform: rotateY(10deg) translateZ(100px)
- 实现过程中，有两个稍微需要思考的点：
- div如何写出六边形平面
1.如上图可以看出， 六边形的平面，本质上是用 3个同样大小div叠加在一起，然后通过旋转得到的，最后在设置同样的背景颜色即可；
2.要能正好拼出六边形，对div的长宽比是有要求的，长宽比 1：根号3 ，也就是 1： Math.sqrt(3)， 为此我特意复习了初中的几何知识：
六边形构成的6个都是等边三角形，故每个边长都相等，夹角60度 小直角三角形的宽高位1比根号3
- 六面体如何构成
- 定位6个相同大小的div，依次旋转 360/60 = 60度， 递增即可，如图：
2. 再将每个立方体 沿着Z 轴， 移动 div高度的一半即可， 如图：
再将各个六面体 拼到一起就构成灯笼拉！ 最后在给整体加上一个展示动画就好了,如下：
单个零件：
多个模块组装：
添加细节装饰：
最后贴图，添加背景图片即可：
我这里还添加了渲染的动画：
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;
}
100% {
transform: rotateX(30deg) rotateY(-360deg) rotateZ(0deg) ;
}
}
最后
写完之后， 发现有大量重复的html结构 和css 样式，如果使用js来动态创建， 每个模块只要一个for循环遍历生成，即可， 会大大简化代码体积的， 但是呢，我就是喜欢写css ，怎么办？
2023年元宵节码上要到了，献上小灯笼🏮， 祝掘金的所有小伙伴 兔年大吉，元宵节快乐！
