3D旋转相册（纯css）

 

 

 

 

html代码：

<div class="Exhibition">　　　　　　　　　　　　　　　　　　　　//放置的容器
  <div class="content">　　　　　　　　　　　　　　　　　　　　 //旋转的目标
    <img class="img1" src="world.jpg"/>
    <img class="img2" src="world.jpg"/>
    <img class="img3" src="world.jpg"/>
    <img class="img4" src="world.jpg"/>
  </div>
</div>

css代码：

.Exhibition{
  perspective: 500px;                                    //让容器有个“坑”可以展示物品
  transform: rotateX(0deg);                              //这里可以展示看的位置！（可以没有）  
}
.content{
  margin-left: 600px;
  margin-top: 200px;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;                          //让里面的元素3d展示
  -webkit-animation:ab 10s infinite linear  ;　　　　　　　//动画/线性无限循环
  -moz-animation:ab 10s infinite linear ;
  animation:ab 10s infinite linear ;
  position: relative;
}img{
  position: absolute;
  height: 200px;
}
.img1{
  -webkit-transform:rotateY(0deg) translateZ(150px) ;                 //倾斜0deg，并向图片的前方拉近150px
  -moz-transform:rotateY(0deg) translateZ(150px) ;　　　　　　　　　　　　　　　　　　　　　　
  -ms-transform:rotateY(0deg) translateZ(150px) ;
  transform:rotateY(0deg) translateZ(150px);
}
.img2{
  -webkit-transform:rotateY(90deg) translateZ(150px) ;　　　　　　　　　　//倾斜90deg，并向图片前拉近150px
  -moz-transform:rotateY(90deg) translateZ(150px) ;
  -ms-transform:rotateY(90deg) translateZ(150px) ;
  transform:rotateY(90deg) translateZ(150px);}
.img3{
  -webkit-transform:rotateY(180deg) translateZ(150px) ;
  -moz-transform:rotateY(180deg) translateZ(150px) ;
  -ms-transform:rotateY(180deg) translateZ(150px) ;
  transform:rotateY(180deg) translateZ(150px);
}
.img4{
  -webkit-transform:rotateY(270deg) translateZ(150px) ;
  -moz-transform:rotateY(270deg) translateZ(150px) ;
  -ms-transform:rotateY(270deg) translateZ(150px) ;
  transform:rotateY(270deg) translateZ(150px);
}
@keyframes demo{
  from{transform: rotateY(0deg)}
  to{transform: rotateY(360deg)}
} 

已上是个人网上看别人的成果，解析出来的，不是很规范，希望有大神给小白留下更标准的解释，谢谢！

来源：https://www.cnblogs.com/ash-sky/p/9582912.html