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，实际上咱们并无使用，你能够理解成至关于又添加了一台备用服务器。