我想爲我的網站創建一種透視人羣。這實際上是一個完整的平面圖像，我想創建一個「彎曲」的感覺，像一個圓形的人羣。它向內並且朝內側看起來更小，並朝向末端彎曲。CSS3「曲面」3D變換/透視幫助
海報圈的例子是最接近我可以找到http://www.webkit.org/blog-files/3d-transforms/poster-circle.html除了我不需要「前」 - 只是後面。每張圖像100px x 100px，每行23個圖像和4行。
我幾乎完全喪失瞭如何解決這個問題......我已經嘗試了幾種應用獨特-webkit-transform的不同方式：rotateY（x）translateZ（x）給每個圖像，但從來沒有到達那裏（努力計算正確的價值觀，或完全使用錯誤的東西），以及玩弄視角。
我知道這是不是正是你想要的，但只是把這個一起，想看看它在大方向：
這是一個簡單的「海報牆「與9個divs - 所有的div絕對位於一個包裝div。
在包裝div中，添加：-webkit-transform-style：preserve-3d;這實際上是創造3D效果。您可以根據所需縮短程度選擇添加透視設置。
並在CSS中，將創建格的造型，看起來像這樣的左手圖片：
-webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg);
-webkit-transform-origin: 100% 0%;
和右手圖像：
-webkit-transform: rotateX(0deg) rotateY(-30deg) rotateZ(0deg);
-webkit-transform-origin: 0% 0%;
注：只有Safari和iOS版現在支持保存-3D。對於其他瀏覽器，您必須通過手動縮放和傾斜圖像來手動添加透視圖，並且它看起來絕對不正確。
2014更新：保存-3D支持現在
在創建以下內容後可能會對您有所幫助：http://jsfiddle.net/remybach/hpsJV/2/
它的肉就在於此：
&:nth-of-type(3n+1) { /* col 1 */
transform:rotateY(20deg) translateZ(-30px);
}
&:nth-of-type(3n+2) { /* col 2 */
transform:translateZ(-90px);
}
&:nth-of-type(3n+3) { /* col 3 */
transform:rotateY(-20deg) translateZ(-30px);
}