CSS Transform perspective 屬性順序陷阱：為什麼 perspective 必須寫在 rotate 之前？

在 CSS 3D 變換中，transform: perspective(400px) rotateY(40deg) 與 transform: rotateY(40deg) perspective(400px) 雖語意相近，但在 Chrome、Firefox 等主流瀏覽器中產生完全不同的渲染結果。本文深入解析矩陣乘法順序對 3D 視覺效果的決定性影響，並提供標準化寫法建議。

現象重現

/* 正確：有透視效果 */
transform: perspective(400px) rotateY(40deg);

/* 錯誤：無透視效果 (平面旋轉) */
transform: rotateY(40deg) perspective(400px);

核心原理：矩陣乘法不滿足交換律

CSS Transform 函數按**書寫順序從左至右**依次套用，對應矩陣乘法 M = M₁ × M₂ × M₃ ...，向量變換為 v' = M × v。

順序 1：perspective → rotate (正確)

M = P × R
v' = P × (R × v)

1. 先對物體施加旋轉 R，使其在 3D 空間傾斜
2. 再施加透視投影 P，從攝影機視點投影至 2D 平面
3. 結果：近大遠小的真實 3D 效果

順序 2：rotate → perspective (錯誤)

M = R × P
v' = R × (P × v)

1. 先對**原始平面物體**施加透視投影 P → 物體仍在 z=0 平面，投影無變化 (退化為縮放)
2. 再施加旋轉 R → 對已投影的 2D 圖像進行 2D 旋轉
3. 結果：失去 3D 深度感，等同 2D 旋轉 + 縮放

透視參數完整體系

最佳實踐：容器級透視 (推薦)

/* 父容器建立共享 3D 場景 */
.scene {
    perspective: 800px;           /* 攝影機距離 800px */
    perspective-origin: 50% 50%;  /* 視點在中心 */
    transform-style: preserve-3d; /* 關鍵：保持子元素 3D */
}

/* 子元素只需寫變換 */
.card {
    transform: rotateY(40deg);    /* 無需重複 perspective() */
    transition: transform 0.6s;
}

優勢：多個子元素共享同一透視視點，視覺一致；動畫效能更佳；程式碼更語意化。

瀏覽器相容性與前綴

視覺化參數影響演示

perspective 距離變化 (z 軸攝影機位置)

• 小數值 (200px)：廣角鏡頭感，透視誇張，邊緣變形大
• 中數值 (500-1000px)：標準鏡頭，自然透視
• 大數值 (2000px+)：長焦鏡頭，接近正交投影，3D 效果微弱

perspective-origin 變化 (x/y 攝影機偏移)

• 0 0：左上角視點，物體向右下傾斜
• 50% 50%：中心視點 (預設)，對稱透視
• 100% 100%：右下角視點，物體向左上傾斜

完整互動範例

<!DOCTYPE html>
<html>
<head>
<style>
.scene {
    width: 200px; height: 200px;
    margin: 50px auto;
    perspective: 600px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}
.cube {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
}
.face {
    position: absolute;
    width: 200px; height: 200px;
    border: 2px solid #333;
    background: rgba(255,255,255,0.8);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold;
}
.front  { transform: translateZ(100px); background: rgba(255,0,0,0.3); }
.back   { transform: rotateY(180deg) translateZ(100px); background: rgba(0,255,0,0.3); }
.right  { transform: rotateY(90deg) translateZ(100px); background: rgba(0,0,255,0.3); }
.left   { transform: rotateY(-90deg) translateZ(100px); background: rgba(255,255,0,0.3); }
.top    { transform: rotateX(90deg) translateZ(100px); background: rgba(255,0,255,0.3); }
.bottom { transform: rotateX(-90deg) translateZ(100px); background: rgba(0,255,255,0.3); }

@keyframes rotate {
    from { transform: rotateX(0) rotateY(0); }
    to   { transform: rotateX(360deg) rotateY(360deg); }
}

/* 控制面板 */
.controls { text-align: center; margin: 20px; }
.controls label { display: block; margin: 10px 0; }
.controls input[type="range"] { width: 300px; }
</style>
</head>
<body>
<div class="scene">
    <div class="cube">
        <div class="face front">前</div>
        <div class="face back">後</div>
        <div class="face right">右</div>
        <div class="face left">左</div>
        <div class="face top">頂</div>
        <div class="face bottom">底</div>
    </div>
</div>

<div class="controls">
    <label>Perspective: <input type="range" id="persp" min="200" max="2000" value="600"> <span id="perspVal">600</span>px</label>
    <label>Origin X: <input type="range" id="orgX" min="0" max="100" value="50"> <span id="orgXVal">50</span>%</label>
    <label>Origin Y: <input type="range" id="orgY" min="0" max="100" value="50"> <span id="orgYVal">50</span>%</label>
</div>

<script>
const scene = document.querySelector('.scene');
const persp = document.getElementById('persp');
const orgX = document.getElementById('orgX');
const orgY = document.getElementById('orgY');

[persp, orgX, orgY].forEach(input => {
    input.addEventListener('input', () => {
        scene.style.perspective = persp.value + 'px';
        scene.style.perspectiveOrigin = orgX.value + '% ' + orgY.value + '%';
        document.getElementById('perspVal').textContent = persp.value;
        document.getElementById('orgXVal').textContent = orgX.value;
        document.getElementById('orgYVal').textContent = orgY.value;
    });
});
</script>
</body>
</html>

常見錯誤與避坑指南

總結

• 矩陣乘法順序決定一切：perspective() 必須在旋轉/位移**之前** (左側)
• 容器級 perspective 屬性優於函數：共享視點、語意清晰、效能更好
• 三大支柱：perspective (距離) + perspective-origin (視點) + transform-style: preserve-3d (3D 空間保持)
• 現代瀏覽器無需前綴：標準語法即可，Autoprefixer 自動處理歷史版本
• 除錯技巧：DevTools Elements 面板 → Computed → transform 矩陣檢視，或使用 transform: matrix3d(...) 直接檢查

掌握透視矩陣的幾何意義與乘法順序，能讓你精準控制 CSS 3D 視覺效果，避開「看起來對但沒效果」的順序陷阱，構建專業級的 3D 交互體驗。