写个宫灯祝掘友们节日快乐

赶着节日的尾巴，写一个纯css的六角形宫灯，祝各位掘友节日快乐，元气满满

素材

背景图

宫灯图案

实现思路

六边形的话，我们需要先画6个div，然后依次旋转60度，然后在Z轴进行偏移就可以了。 偏移的算法是 宽度/Math.tan(Math.PI*30/180)这里涉及到的是三角函数的知识，就不展开讲了

• 首先绘制盒子

.light-box{
    transform-style: preserve-3d;
    position: absolute;
    width: 300px;
    height: 500px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-origin: center;
    animation: rotateY 9s linear infinite;
    color: #FFF;
    text-align: center;
    line-height: 420px;
    font-size: 60px;
    font-weight: 600;
  }

• 绘制六个面

<div class="light-box">
    <div>掘</div>
    <div>友</div>
    <div>中</div>
    <div>秋</div>
    <div>快</div>
    <div>乐</div>
  </div>
  .light-box>div{
    width: 300px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #f76126;
    background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.90sjimg.com%2Felement_origin_pic%2F17%2F09%2F11%2F717a28959c4cf35950fc4426026b3b3c.png&refer=http%3A%2F%2Fpic.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665471923&t=f68e9f94014a6644187d34666ee24ecd');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .light-box>div:nth-child(1){
    transform: rotateY(0) translateZ(260px);
  }
  .light-box>div:nth-child(2){
    transform: rotateY(60deg) translateZ(260px);
  }
  .light-box>div:nth-child(3){
    transform: rotateY(120deg) translateZ(260px);
  }
  .light-box>div:nth-child(4){
    transform: rotateY(180deg) translateZ(260px);
  }
  .light-box>div:nth-child(5){
    transform: rotateY(-120deg) translateZ(260px);
  }
  .light-box>div:nth-child(6){
    transform: rotateY(-60deg) translateZ(260px);
  }

• 实现旋转动画， 这里我将盒子沿X轴旋转了一下角度，目的是更清楚的显示是一个六边形

@keyframes rotateY  {
    0% {
        transform: rotateY(0) rotateX(5deg);
    }

    100% {
        transform: rotateY(360deg) rotateX(5deg);
    }
  }

• 给每个面添加背景+闪烁效果

.light-box>div{
..
background-color: #fecd4a;
animation: shine 1s linear infinite;
@keyframes shine  {
    0% {
      box-shadow: 0 0 10px 2px #fff inset;
    }

    100% {
      box-shadow: 0 0 50px 2px #fff inset;
    }
  }
  ..
  }