今天主要围绕demo也就是实际使用场景来分清楚他们的作用。
基本概念:
- transform w3c给出的定义是用来旋转,移动,缩放,倾斜
- 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,实际上我们并没有使用,你可以理解成相当于又添加了一台备用服务器。