CSS 3D Panorama（全景） - 淘寶造物節技術剖析

時間 2019-11-11

標籤 css 3d panorama 全景淘寶造物技術剖析欄目 CSS 简体版

原文原文鏈接

本文轉自凹凸實驗室：https://aotu.io/notes/2016/08... css

前言

3D 全景並非什麼新鮮事物了，但之前咱們在 Web 上看到的 3D 全景通常是經過 Flash 實現的。若咱們能將 CSS3 Transform 的相關知識運用得當，也是能實現相似的效果。換句話說，3D 全景其實就是 CSS3 3D 的應用場景之一。html

準備

在實現 CSS3 3D 全景以前，咱們先理清部分 CSS3 Transform 相關的屬性：git

transform-origin：元素變形的原點（默認值爲 50% 50% 0，該數值和後續說起的百分比默認均基於元素自身的寬高算出具體數值）；
transform-style：爲子元素提供 2D 仍是 3D 的場景。另外，該屬性是非繼承的；
transform：修改 CSS 可視化模型的座標空間，包括平移（translate）、旋轉（rotate）、縮放（scale）和扭曲（skew）。

下面咱們對上述的一些點進行更深刻的分析：github

對於 perspective，該屬性指定了「眼睛」與元素的 perspective-origin（默認值是 50% 50% 0）點的距離。那麼問題來了：「當咱們以 px 做爲衡量單位時，它的實際距離該如何量化呢？」
答：當屏幕分辨率是 1080P（1920*1080px）且該元素或其祖先元素的 perspective 數值的值爲 1920px 時，應用了 CSS3 3D Transform 的子元素的立體效果就至關於咱們在距離一個屏幕寬度（1920px）的屏幕前觀看該元素時的真實效果。儘管如此，目前筆者也不知道如何準確地爲元素設置一個合適的 perspective 值，只能猜想大概值後進行調整，以達到滿意的呈現效果。

根據類似三角形的性質可計算出被前移的元素最終在屏幕上顯示的實際大小瀏覽器

另外，關於 perspective 還有另一個重要的點是：由於 perspective-origin 屬性的默認值是 50% 50% 0，因此對哪一個元素應用 perspective 屬性，就決定了「眼睛」的位置（即咱們的「眼睛」是在哪一個角度看物體）。通常來講，當咱們須要正視物體時，就會將該屬性設置在與該元素中心重合的某一祖先元素上。app

再另外，若是說：「如何讓一個元素（的背面）不可見？」，你可能會回答 backface-visibility:hidden;。其實，對於在「眼睛」背後的元素（以元素的 transform-origin 爲參考點），即元素的 Z 軸座標值大於 perspective 的值時，瀏覽器是不會將其渲染出來的。函數

對於 transform-style，該屬性指定了其子元素是處於 3D 場景仍是 2D 場景。對於 2D 場景，元素的先後位置是按照平時的渲染方式（即若在普通文檔流中，同層級元素是按照代碼中元素的前後編寫順序，後面的元素會遮住在其前面的元素）；對於 3D 場景，元素的先後位置則按照真實世界的規則排序（即靠近「眼睛」的元素，會遮住離「眼睛」遠的元素）。
另外，因爲 transform-style 屬性是非繼承的，對於中間節點須要顯式設定。工具
對於 transform 屬性：下圖整理了 rotate3d、translate3d 的變換方向：

須要注意的是：transform 中的變換屬性的順序是有關係的，如 translateX(10px) rotate(30deg) 與 rotate(30deg) translateX(10px) 是不等價的。字體

另外，須要注意的是 scale 中若是有負值，則該方向會產生 180 度的翻轉；動畫

再另外，部分 transform 效果會致使元素（字體）模糊，如 translate 的數值存在小數、經過 translateZ 或 scale 放大元素等等。每一個瀏覽器都有其不一樣的表現。

實現

上面理清了一些 CSS Transform 相關的知識點，下面就講講如何實現 CSS 3D 全景：

想象一下，當咱們站在十字路口中間，身體旋轉 360°，這個過程當中所看到的畫面就是一幅以你爲中心的全景圖了。其實，當焦距不變時，咱們就等同於站在一個圓柱體的中心。

可是，虛擬世界與現實世界的最大不一樣是：沒有東西是連續的，即全部東西都是離散的。例如，你沒法在屏幕上顯示一個完美的圓。你只能以一個正多邊形表示圓：邊越多，圓就越「完美」。

同理，在三維空間中，每一個 3D 模型都是一個多面體（即 3D 模型由不可彎曲的平面組成）。當咱們討論一個自己就是多面體（如立方體）的模型時並不足覺得奇，但咱們想展現其它模型時，如球體，就須要記住這個原理了。

淘寶造物節的活動頁就是 CSS 3D 全景的一個很讚的頁面，它將全景圖分割成 20 等份，相鄰的元素構成的夾角 18°（360/20，相鄰兩側面相對於棱柱中心所構成的夾角）。須要注意的是：咱們要確保每一個元素的正面是指向棱柱中心的。因此要計算好每等份的旋轉角度值後，再將元素向外（即 Z 軸方向）平移 r px。對於立方體的 r 就是 邊長/2，而對於其它更復雜的正多面體呢？

舉例：對於正九棱柱，每一個元素的寬爲 210px，對應的角度爲 40°，即以下圖：
圖片來自：https://desandro.github.io/3d...

正九棱柱的俯視圖

計算過程

由此可獲得一個公用函數，只需傳入含有元素的寬度和元素數量的對象，便可獲得 r 值：

function calTranslateZ(opts) {
  return Math.round(opts.width / (2 * Math.tan(Math.PI / opts.number)))
}

calTranlateZ({
    width: 210,
    number: 9
});  // 288

俯視時所看到的元素外移動畫

另外，爲了讓下文易於理解，咱們約定 HTML 的結構：

#view(perspective:1000px)
    #stage(transform-style:preserve-3d)
        #cube(transform-style:preserve-3d)
            .div（width:600px;height:600px;） /*組成立方體的元素*/

正棱柱構建完成後，就須要將咱們的「眼睛」放置在正棱柱內。因爲在「眼睛」後的元素是不會被瀏覽器渲染的（與 .div元素 是否設置 backface-visibility:hidden; 無關），並且咱們保證 .div元素 的正面都是指向正棱柱中心，這樣就造成 360° 被環繞的效果了。

那「眼睛」具體被放置在哪一個位置呢？
答：經過設置 #stage 元素的 translateZ 值，讓不能被看到的 .div元素 在 Z 軸上的最終座標值（即其自身 Z 座標和祖先元素 Z 座標相加）大於 #view 元素的 perspective 值便可。如：立方體的正面的 translateZ 是 -300px（爲了保證立方體的正面是指向立方體中心，正面元素須要以自身水平方向上的中線爲軸，旋轉 180度，即 rotateY(-180deg) translateZ(-300px)，即正面元素向「眼球」方向平移了 300px），而 #view 的 perspective 值爲 1000px，那麼 #stage 的 translateZ 值應該大於 700px 且小於 1300px 便可，具體數值則取決於你想要的呈現效果。