[分享]css制作3d立体旋转相册

CSS可以很好地帮助我们制作出炫酷的3D效果，比如制作一个3D立体旋转相册。下面我们来简单介绍一下实现方法。

.carousel{
  position: relative;
  width: 640px;
  height: 360px;
  perspective: 1000px;
}
.carousel-container{
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s;
}
.carousel-item{
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 360px;
  transform-style: preserve-3d;
  transform-origin: center center -500px;
}
.carousel-item img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.carousel-item:nth-child(1){
  transform: rotateY(0deg);
  z-index: 1;
  transition: z-index .5s;
}
.carousel-item:nth-child(2){
  transform: rotateY(60deg);
  z-index: 2;
  transition: z-index .5s;
}
.carousel-item:nth-child(3){
  transform: rotateY(120deg);
  z-index: 3;
  transition: z-index .5s;
}
.carousel-item:nth-child(4){
  transform: rotateY(180deg);
  z-index: 2;
  transition: z-index .5s;
}
.carousel-item:nth-child(5){
  transform: rotateY(240deg);
  z-index: 1;
  transition: z-index .5s;
} 

首先，在HTML中创建一个carousel组件，使用perspective属性定义相册的透视效果。在carousel-container元素中使用transform-style: preserve-3d属性开启3D效果，并通过transition属性定义动画过渡效果。在carousel-item元素中，我们设置了每个图片旋转的初始角度及在不同位置需要的层级。注意，transform-origin属性设置了旋转的中心点，这里我们设置在相册的中心。

对于每个.carousel-item元素中的图片我们可以根据需要设置其宽高、位置等属性。在这里，我们让图片的宽高都等于其父元素.carousel-item。

最后，在CSS中我们设置了每个.carousel-item元素旋转的角度。然后根据图片的位置设置其在Z轴方向上的层级，使得效果更为逼真，通过z-index属性来实现过渡效果。