CSS3實現旋轉圖片相簿
阿新 • • 發佈：2018-12-09
基本思路：
1.用一個div#box包含十張圖片，div定位為fixed,定位的四個值全部設為0，然後margin設為0，就可以讓盒子居中在中間。
2.十張圖片設為絕對定位，這樣3D動畫的中心就會變為外盒子的中心。
3.先讓圖片向外推出，使用translateZ(680px)，然後設定旋轉rotateX,由於旋轉中心變為了盒子，因此圖片會以盒子為中心而旋轉，而不是以自身中軸旋轉。這樣就會做出圖片像眾星一樣圍繞太陽圍繞盒子來旋轉。
4.前面三步所有元素都是靜態而非動態的，給盒子設定動畫，讓它沿著y軸旋轉2圈，沿著x軸上下移動，就可以做到旋轉相簿的效果
效果如下：
HTML程式碼如下：
<body> <div id="box"> <img src="img/1.png" alt="" /> <img src="img/2.png" alt="" /> <img src="img/3.png" alt="" /> <img src="img/4.png" alt="" /> <img src="img/5.png" alt="" /> <img src="img/6.png" alt="" /> <img src="img/7.png" alt="" /> <img src="img/8.png" alt="" /> <img src="img/9.png" alt="" /> <img src="img/10.png" alt="" /> </div> </body>
CSS程式碼如下
*{ margin:0; padding: 0; } #box{ width: 200px; height: 200px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-style: preserve-3d;/*表示所有元素在3d空間顯示*/ animation: xuanZhuan 60s linear infinite; } img{ width: 200px; height:200px; position: absolute; } #box img:nth-child(1){/*360除以十張=36，rotateY增長36度，Z是推出680px*/ transform: rotateY(0) translateZ(680px); } #box img:nth-child(2){ transform: rotateY(36deg) translateZ(680px); } #box img:nth-child(3){ transform: rotateY(72deg) translateZ(680px); } #box img:nth-child(4){ transform: rotateY(108deg) translateZ(680px); } #box img:nth-child(5){ transform: rotateY(144deg) translateZ(680px); } #box img:nth-child(6){ transform: rotateY(180deg) translateZ(680px); } #box img:nth-child(7){ transform: rotateY(216deg) translateZ(680px); } #box img:nth-child(8){ transform: rotateY(252deg) translateZ(680px); } #box img:nth-child(9){ transform: rotateY(288deg) translateZ(680px); } #box img:nth-child(10){ transform: rotateY(324deg) translateZ(680px); } @keyframes xuanZhuan{ 0%{transform:rotateX(0) rotateY(0);} 25%{transform:rotateX(20deg) rotateY(180deg);} 50%{transform:rotateX(0deg) rotateY(360deg);} 75%{transform:rotateX(-20deg) rotateY(540deg);} 100%{transform:rotateX(0deg) rotateY(720deg);} } @keyframes rotate{ from{transform: rotate(0);} to{transform: rotate(45deg);} }