CSS3 中的translate transform 你真的搞清楚了？

今天主要圍繞demo也就是實際使用場景來分清楚他們的做用。

基本概念：

1. transform w3c給出的定義是用來旋轉，移動，縮放，傾斜
2. translate   他只是transform的一個屬性啊，盆友們         

我本身探索的他倆的幾個應用場景：

• 使一個div垂直集中對齊

body {
            position: relative;
            height: 500px;
        }
        div {
            height: 100px;
            width: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            background: antiquewhite;
            transform: translate(-50%, -50%);
        }

從代碼能夠看出其實是在div的水平和垂直的位置上分別向左和向上移動了div自己寬高的50%

• 水平移動某個div

body {
            position: relative;
            height: 500px;
        }

        div {
            height: 100px;
            width: 100px;
            position: absolute;
            left: 120px;
            background: blue;
            transition: all 2s linear;
        }

        span:hover + div {
            transform: translate(300px);
            left: 627px;
            background: yellow;
        }

若是須要移動且有旋轉效果的話，transform改爲rotate屬性

transform: rotate(360deg);

• 頁面動畫卡頓

爲動畫dom添加-webkit-transform:transition3D(0,0,0) 或者 -webkit-transform:translateZ(0)這兩個屬性都會開啓GPU加速模式。讓瀏覽器在渲染動畫時從CPU轉向GPU。原理就是這兩個屬性實際上是渲染3d效果，瀏覽器所以開啓GPU加速模式，然鵝咱們把他設置爲0，實際上咱們並無使用，你能夠理解成至關於又添加了一臺備用服務器。