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)}
} 

已上是個人網上看別人的成果，解析出來的，不是很規范，希望有大神給小白留下更標准的解釋，謝謝！