如何实现钻石图片向下旋转的3D动画效果并调节动画速度

核心实现代码 #

你可以直接在页面中添加如下CSS样式，绑定到你已经定义的.diamond_animtion类上即可实现效果：

/* 给父容器添加透视，增强3D效果 */
.relative:has(.diamond_animtion) {
  perspective: 1000px;
}

.diamond_animtion {
  /* 开启3D变换空间 */
  transform-style: preserve-3d;
  /* 动画配置：动画名称 时长 无限循环 匀速播放 */
  animation: diamondRotate 10s linear infinite;
}

/* 定义钻石向下旋转的3D动画 */
@keyframes diamondRotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    /* rotateX控制纵向（向下）旋转，360deg为完整一圈 */
    transform: rotateX(360deg);
  }
}

动画速度调整方法 #

直接修改.diamond_animtion类中animation属性的时长参数即可：

• 上述代码中的10s代表动画完整播放一次需要10秒，数值越大播放速度越慢，数值越小播放速度越快
• 如果你需要非常平缓的效果，可以调整为15s-20s，要快的话可以设为3s-5s

优化建议 #

如果需要更真实的钻石光影旋转效果，你可以准备8-16张钻石不同旋转角度的序列图，改用逐帧动画实现，效果会比单张图片的CSS变换更贴近真实3D效果，示例代码如下：

.diamond_animtion {
  /* 假设序列帧图是16张拼在一张雪碧图上，每张宽144px */
  background: url("diamond-sprite.png") 0 0 no-repeat;
  animation: diamondFrame 8s steps(16) infinite;
}
@keyframes diamondFrame {
  0% { background-position: 0 0; }
  100% { background-position: -2304px 0; }
}

内容的提问来源于stack exchange，提问作者Umair Mustafa