CSS3“曲面”3D變換/透視幫助

Question

我正試圖為我的網站創建一種觀點人群。 它實際上是一個充滿平面圖像的ul，我想創造一個像圓形人群一樣的“彎曲”感覺。 它向內並且在內部看起來更小並且朝向末端彎曲。

海報圈示例是我能找到的最接近的http://www.webkit.org/blog-files/3d-transforms/poster-circle.html，除了我不需要“前面” - 只是背面。 每幅圖像為100px x 100px，每行23幅圖像和4行。

關於如何處理這個問題，我幾乎完全失去了...我嘗試了幾種不同的方法，將獨特的-webkit-transform：rotateY（x）translateZ（x）應用於每個圖像，但從未完全實現（努力計算正確的價值觀，或完全使用錯誤的東西），以及玩視角。

Answer 1

這是一個簡單的“海報牆”，有9個div - 所有div都絕對位於包裝div中。

在包裝器div中，添加：-webkit-transform-style：preserve-3d; 這就是實際創建3D效果的原因。 您可以根據所需的透視程度選擇添加透視設置。

在CSS中，您可以為左側圖像創建看起來像這樣的div樣式：

-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現在廣泛支持跨瀏覽器

Answer 2

在創建以下可能對您有所幫助之后找到了這個： 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);
}

Answer 3

我知道這不完全是你想要的，但只是將它們放在一起，想看看它是否在大方向：

http://jsfiddle.net/cwolves/mwxNK/2/

Answer 4

我的版本在這里調整了一下：

http://jsfiddle.net/sJCAh/

不完全是豐富多彩的圖片所展現的

:-)