3d旋转爱心粒子代码html

这是一款利用HTML5和CSS3制作的3D爱心动画特效源码，可以实现一个3D旋转的爱心粒子效果。代码运行效果美观大方，有很强的立体感，是一款HTML5 3D特效的经典之作。程序效果很简单，是一颗跳动的爱心。在心脏下面有一行小字写着“七夕快乐”，按住鼠标左键并拖动可以让它旋转起来，按住右键可以让这颗心暂时停止跳动。

<!--HTML代码-->
<div class="heart">
  <div class="heart-box">
    <div class="heart-inner"></div>
  </div>
  <div class="heart-text">七夕快乐</div>
</div>

/*CSS代码*/
.heart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  perspective: 800px;
  transform-style: preserve-3d;
  cursor: move;
}

.heart-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
}

.heart-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateZ(45deg);
  animation: beat 1s ease-in-out infinite;
  background-color: #f00;
}

.heart-text {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: #fff;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes beat {
  0% {
    transform: scale(1) rotateZ(0deg);
  }
  50% {
    transform: scale(0.6) rotateZ(45deg);
  }
  100% {
    transform: scale(1) rotateZ(0deg);
  }
}