如何通过纯CSS实现图片的立方体转动效果的方法和技巧

<div class="cube">
   <div class="face">
      <img src="image1.jpg" alt="Image 1">
   </div>
   <div class="face">
      <img src="image2.jpg" alt="Image 2">
   </div>
   <div class="face">
      <img src="image3.jpg" alt="Image 3">
   </div>
   <div class="face">
      <img src="image4.jpg" alt="Image 4">
   </div>
   <div class="face">
      <img src="image5.jpg" alt="Image 5">
   </div>
   <div class="face">
      <img src="image6.jpg" alt="Image 6">
   </div>
</div>

.cube {
   width: 200px;
   height: 200px;
   perspective: 800px;
   position: relative;
   transfORM-style: preserve-3d;
   animation: rotate 6s infinite linear;
}

.face {
   position: absolute;
   width: 200px;
   height: 200px;
   border: 1px solid #000;
}

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

.face img {
   width: 100%;
   height: 100%;
}