【css】translate元素仍佔據原始位置特性分析

阿新 • • 發佈：2020-12-18

技術標籤：css css3

如何發現該特性的？

使用translateX平移元素後，再用offsetLeft獲取元素距離body左側的距離時，無法獲取經translateX移動的部分（背景復現見以下程式碼），造成該結果的原因是translate屬性不會改變元素原始位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=" 
width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
        }
        div {
            position: absolute;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
            transform 
: translateX(100px);
        }
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        var div = document.querySelector('div');
        console.log(div.offsetLeft);//100
    </script>
</body>
</html>

為什麼translate不會改變元素原始位置？這樣的特性適用於什麼場景？

改變transform或opacity不會觸發瀏覽器重新佈局（reflow）或重繪（repaint），只會觸發複合（compositions）（

https://blog.csdn.net/duola8789/article/details/79237553，關於重繪和複合可以看這篇文章，作者爸爸寫的很細緻）。

transform使瀏覽器為元素建立一個 GPU 圖層，translate改變位置時，元素依然會佔據其原始空間，如果改變絕對定位會觸發重新佈局，進而觸發重繪和複合。因此translate()更高效，可以縮短平滑動畫的繪製時間。

【css】translate元素仍佔據原始位置特性分析

如何發現該特性的？

為什麼translate不會改變元素原始位置？這樣的特性適用於什麼場景？

【css】translate元素仍佔據原始位置特性分析

【CSS】居中元素定寬高，居中元素不定寬高（待續）

【css】css選擇器之奇偶元素以及倍數元素

【css】垂直水平居中目標元素

【CSS】屬性

【css】簡單滑動開關（每日一技）

【Css】Scss 與 Sass 簡單示例

【Css】SCSS基本語法

【css】導航欄，選單欄簡單設定

【CSS】clip-path屬性深入理解與使用

【Java】——主要元素實現

【css】實現一張折扣券

【CSS】10 分鐘理解 BFC 原理

【CSS】快速掌握CSS3中的flex佈局

【CSS】將background-size寫入background中的語法

【CSS】層次選擇器

【css】i標籤icon圖示旋轉樣式

【CSS】Grid 佈局（一）

【CSS】CSS3學習筆記——選擇器

【CSS】CSS的相對單位

【css】translate元素仍佔據原始位置特性分析

如何發現該特性的？

為什麼translate不會改變元素原始位置？這樣的特性適用於什麼場景？

相關推薦