寫這篇文章的緣由是因為看到了這個頁面：
運用 css3 完成的 3d 視角，雖然有一些暈3d，但是使人置身於其中的互動體驗感覺非常棒，運用在移動端製作一些 h5 頁面可謂十分博人眼球。
並且掌握原理之後製作起來也並不算廢力，好好的研究了一番後將一些學習過程共享給大家。
百聞不如一見，先直觀感受一下上述我所說的效果：
最好能點進去看看，這裡我使用了帶背景色的 div 作為示例，我們的視角處於乙個正方體中，正方體的旋轉動畫讓我們有了 3d 的感覺。
那麼原本的圖長什麼樣呢？我們把距離拉遠，一**竟：
是長這樣的：
相較於第一種效果，其實所做的只是將我們的視角推進到了正方體當中，有了一種身臨其景的感覺。
而合理的運用 css3 所提供的一些 3d 屬性，很容易就能達到上述的效果。
製作這樣乙個 3d 圖形，我在之前的文章已經很詳細的講述了過程，感興趣的可以戳進去看看：
【css3高階】酷炫的3d旋轉透視
再簡單複述一下，主要是運用到了兩個 css 屬性：
要利用 css3 實現 3d 的效果，最主要的就是借助 transform-style 屬性。
transform-style 只有兩個值可以選擇：
// 語法：
transform-style: flat|preserve-3d;
transform-style: flat; // 預設，子元素將不保留其 3d 位置
transform-style: preserve-3d; // 子元素將保留其 3d 位置。
// 語法
perspective: number|none;
而如果設定 perspective 後，將會看到三維的效果。
我們上面之所以能夠在正方體外圍看到正方體，以及深入正方體內，都是因為perspective這個屬性。它讓我們能夠選擇推進視角，還是遠離視角，因此便有了 3d 的感覺。
為了完成這樣乙個效果，需要乙個靈活的布局，去控制整個 3d 效果的展示。
下面是我覺得比較好的一種方式：
以上述 demo 中的正方體為例子，class 為img的 div 塊的高寬為 400px*400px。那麼要利用 4 個 這樣的 div 拼接成乙個正方體，需要分別將 4 個 div 繞 y 軸旋轉 [90°, 180°, 270°, 360°]，再translatey(200px)。
值得注意的是，一定是先旋轉角度，再偏移距離，這個順序很重要。
看看俯檢視，也就是這個意思：
這是最簡單的情況了，都是直角。
如果是一張圖需要分割成八份，假設每張圖分割出來的高寬為 400 400 ， 8 張圖需要做的操作是依次繞 y 軸旋轉 [45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°] ，偏移的距離為translatey(482.84px)，也就是 （200 + 200√2）。
看看俯檢視：
效果圖：
上面的示例都是使用的帶背景色的 div 塊，現在我們選取一張真正的，將其拼接成乙個柱體。
下面這張圖，大小為3480px * 2000px:
我們把它分割為 20 份，拼成乙個正 20 邊形，當然不用一塊一塊切圖下來，利用background-position就可以完成了。而且分割的份數越多，最終做出來的效果越像乙個圓柱，效果也更加真實。
正 20 邊形，需要 20 個 div ，假設容器是 .img-bg1 ~ .img-bg20 ，那麼每塊的寬度為174px，依次需要遞增的角度為 18° ，並且我們需要計算出需要偏移的距離為translatez(543px)。
可以利用一些 css 預處理器處理這段**，下面是 sass 的寫法：
// sass 的寫法
$imgcount : 20 !default;
@for $i from 1 through $imgcount
}
可以看到，圖中近視為乙個圓柱形，不過有一些小問題：
做到這一步，只剩下最後一步，就是推進我們的視角，進入到圓柱內部，產生 3d 檢視的感覺。
我們通過 class 為control這個 div 控制這個效果，不過這裡控制我們進入圓柱內部的屬性不是調整修改perspective屬性，而是調整translatez屬性。通過控制 translatez 得到的畫面更加真實，可以自己嘗試一下分別控制perspective與translatez得到的效果，便會有深刻的感受。
最後的效果： demo可以戳這裡，由於是移動端效果，開啟模擬器**更佳
整個效果圖太大，只擷取了部分製作成 gif：
還有乙個小問題，那就是進入到圓柱內部之後，整個都反了過來，所以我們可能需要利用ps將原圖進行一次左右翻轉，這樣進入內部之後，看到的就是原圖效果。
css33dview
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
Flutter 實現酷炫的3D效果
下面是要實現的效果 flutter 中3d效果是通過transform元件實現的，沒有變換效果的實現 通過gesturedetector元件新增滑動事件監聽 override widget build buildcontext context child container alignment al...
小炫酷的3D旋轉立方體相簿
前言 今年是特別的一年，是特別宅的一年，大家都宅在家做貢獻。在這個逆戰時期，讓我們發揮逆戰精神，一起來敲 吧！正文 今天，我們來做乙個有點小炫酷的3d旋轉立方體相簿。那麼首先，讓我們來了解一下3d。屬性 perspective 景深 近大遠小 是觀察物體的乙個視角距離，距離越小效果越明顯，它的數值一...
學習 CSS 之用 CSS 3D 實現炫酷效果
把大象關進冰箱需要幾步？三步，把冰箱門開啟，把大象關進去，把冰箱門關上。用 css 實現 3d 效果需幾步？三步，設定透視效果 perspective，改變元素載體為 preserve 3d，對元素進行 3d 轉換操作。perspective 屬性決定了我們從什麼地方檢視元素，定義時的 perspe...