CSS3做一個3D展示相冊

先來康康效果

（錄不好，就只能是圖片了）
原作者是油管上的Online Tutorials

現在就來實現它

1、準備知識
transform-style: preserve-3d;對3D變換有空間概念，其次就是perspective()；這個屬性的理解了，想了解更多可以去MDN,相關博客文章，詳細瞭解（主要我也理解不到位）

2、HTML結構
這裏有個需要說下style="–i:1"，這個是css的原生變量，這了就聲明瞭一個變量並賦值，在這裏用變量，主要是方便後面樣式的添加，當然變量還有高級的用法，就去查相關文檔了（我也不會啊）。

3、CSS樣式

1. 基本樣式
   讓整個容器盒子在頁面居中顯示，並給它一個合適的大小，這一定給上transform的變換方式是3d的，再準備一個動畫。
2. 圖片盒子
   利用定位、transform，讓每張圖片都打開，圍成一個圓，這裏就用到了變量，來簡化一下代碼，利用計算，每個div 的–i，都會子在calc（）中計算，不用我們在每個的用選擇器再寫一遍了。
   還有-webkit-box-reflect；這屬性是盒子的投影，好像就谷歌支持，爲了好看些，再底部加了投影，距離0px，再加了一個遮罩
   再就是讓圖片撐滿父容器了。
   3. 文字處理及動畫
   文字就用定位把它移動到圖片圈的中間
   動畫：讓整個容器沿着Y軸旋轉，注意了，這裏的perspective(1200px)；要寫在旋轉前面，而且這條屬性得就寫在這裏，單獨寫在容器身上，達不到效果，至於爲什麼，我也沒搞清楚，後面搞清楚了再來修改。

好了這貓咪相冊就寫完了

總結
涉及的知識主要是transform相關的屬性，對3D的空間感，重要屬性的理解了（手動狗頭），
CSS3真的很強大，有好多稀奇古怪的玩意兒，css也可以如此美麗。

————縱然是在巨人的肩膀上學習……