CSS 3D动画【大小可开合正方体】，阿里出品

/* 设置基础样式 */
.container {
  perspective: 1000px; /* 创建3D空间 */
}
 
.cube {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d; /* 设置子元素在3D空间中显示 */
  animation: rotate 5s infinite linear; /* 应用旋转动画 */
}
 
/* 定义正方体的每一个面 */
.cube div {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0.8;
  transition: all 0.4s ease-in-out; /* 平滑过渡效果 */
}
 
/* 设置正方体各面的背景色 */
.cube .face1 {
  background: rgba(255, 0, 0, 0.5);
}
 
.cube .face2 {
  background: rgba(0, 255, 0, 0.5);
}
 
.cube .face3 {
  background: rgba(0, 0, 255, 0.5);
}
 
.cube .face4 {
  background: rgba(255, 255, 0, 0.5);
}
 
.cube .face5 {
  background: rgba(255, 0, 255, 0.5);
}
 
.cube .face6 {
  background: rgba(0, 255, 255, 0.5);
}
 
/* 定义旋转动画 */
@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
 
/* 设置鼠标悬浮时放大动画 */
.cube:hover {
  animation-play-state: paused;
}
 
.cube:hover div {
  transform: translateZ(50px);
}

这段代码展示了如何使用CSS 3D转换创建一个旋转的正方体动画。它包括了设置3D空间、定义每一个面的背景色、应用旋转动画以及在鼠标悬浮时放大动画的效果。这个例子可以教会开发者如何利用CSS创建复杂的交互动画效果。