3d旋转音乐盒css3

3D旋转音乐盒是一种很有趣的效果，在网页开发中也有很多运用。使用CSS3的技术，很容易实现这种效果。下面来介绍如何实现一个3D旋转音乐盒。

.Box {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
  transition: transform 1s ease-in-out;
}

.Box:hover {
  transform: rotateY(360deg) rotateX(360deg);
}

.front,.back,.left,.right,.top,.bottom {
  position: absolute;
  width: 300px;
  height: 300px;
  line-height: 300px;
  text-align: center;
  font-size: 48px;
}

.front {
  background-color: #FFFFFF;
  transform: translateZ(150px);
}

.back {
  background-color: #EEEEEE;
  transform: rotateY(180deg) translateZ(150px);
}

.left {
  background-color: #ddddDD;
  transform: rotateY(-90deg) translateZ(150px);
}

.right {
  background-color: #CCCCCC;
  transform: rotateY(90deg) translateZ(150px);
}

.top {
  background-color: #BBBBBB;
  transform: rotateX(90deg) translateZ(150px);
}

.bottom {
  background-color: #AAAAAA;
  transform: rotateX(-90deg) translateZ(150px);
}

代码解释：

首先设置一个名称为“Box”的容器，宽高各为300px，并设置preserver-3d，保留3D效果。设置transform的rotateY和rotateX两个属性，通过1s的ease-in-out过渡效果，实现鼠标悬停时360度的转动动画效果。

接着设置6个面，分别为front、back、left、right、top和bottom。每个面都有自己特定的颜色，并通过不同的transform属性，实现不同的旋转方向和位置效果。这6个面加上“相机”，形成3D效果的盒子，也是整个3D旋转音乐盒的主要部分。

最后在HTML中引入CSS文件，在页面中引用Box容器，即可完成3D旋转音乐盒的效果展示。