css3 3d轮转

CSS3中提供了许多3D效果，其中最常见的就是3D轮转了。3D轮转可以给网站带来更加活泼和生动的效果，让用户在浏览的时候感到更加愉悦。

.Box {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  border: 1px solid #ccc;
  perspective: 800px;
}

.Box:hover {
  transform: rotate3d(1,1,360deg);
  transition: all 1s ease-in-out;
}

首先，需要给需要轮转的元素设置透视属性。透视属性决定了轮转的视角，值越大则视角越远，变化越微小。在上述代码中，透视属性被设置成了800px，可以根据需要自行调整。

然后，给需要轮转的元素设置鼠标悬停事件，并在事件中设置transform属性。其中，rotate3d()函数可以让元素绕着指定轴旋转。参数1，2和3分别为x、y、z轴的旋转角度，参数4为旋转的角度，上述代码中设置为360deg，表示旋转一圈。

最后，设置transition属性，让元素旋转过程中出现平滑的变化，提高用户体验。