用CSS轻松实现礼物旋转特效动画

让页面动起来：送个旋转礼物给同事

年底了，公司内部系统要做点小装饰，领导说想在员工福利页面加点趣味。我琢磨着，不如整个礼物盒转着圈的动画，点开页面就冒出来，像个小惊喜。效果不复杂，但挺抓眼球，关键是纯CSS就能搞定。

核心思路：用transform做3D旋转

这个动画的核心是CSS的transform和@keyframes。先把一个盒子画成礼物的样子，加上丝带装饰，再让它绕着Y轴不停旋转。用户一打开页面，就看到礼盒在那儿悠悠地转，点击还能触发弹窗提示，比如“恭喜你获得下午茶券”。

HTML结构很简单：

<div class="gift-container">
  <div class="gift-box"></div>
</div>

样式怎么写

先给容器加透视，不然3D效果出不来。然后定义动画帧，从0度转到360度：

.gift-container {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  margin: 60px 0;
}

.gift-box {
  width: 100px;
  height: 100px;
  background: #e74c3c;
  border-radius: 10px;
  position: relative;
  animation: rotateGift 5s linear infinite;
}

.gift-box::before,
.gift-box::after {
  content: '';
  position: absolute;
}

/* 系带效果 */
gift-box::before {
  width: 100%;
  height: 20px;
  background: #f1c40f;
  top: 40px;
  left: 0;
}

gift-box::after {
  width: 20px;
  height: 100%;
  background: #f1c40f;
  top: 0;
  left: 40px;
}

@keyframes rotateGift {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

这段代码里，perspective让3D旋转有纵深感，rotateY控制绕竖轴转圈。动画时长设成5秒，循环播放，看起来就很丝滑。

实际应用场景

别以为这种动画只能用来玩。我们部门上周上线了一个“员工积分兑换”页面，就在兑换按钮旁边加了个小旋转礼盒。视觉上引导大家注意福利入口，数据反馈点击率比之前高了近三成。还有HR做节日祝福页，背景飘着几个慢速旋转的礼物，氛围一下就出来了。

如果担心动画太花影响办公效率，可以加个开关，让用户自己决定是否开启动效。或者只在特定时间（比如周五下午）自动激活，当作小彩蛋。

这种特效不依赖JavaScript，兼容性也不错，主流浏览器基本都能跑。改几个参数，颜色、大小、速度，立马能适配不同主题。下次做内部系统优化，不妨试试看。