csstranslate用法,translate的语法

CSS3中translate，transform和translation的区别和联系

translate 同其他属性rotate/skew/scale等，构成css中变形的几种方式。translate(x, y) 是将dom元素，在原来的基础上，偏移一定距离。translate需要跟transform结合使用。

transform?css中的变形属性

transition 是制作居间动画的一种方式，可以指定“渐变”的css属性，如width，height，top，left，opacity，transform等。还可以指定渐变动画的duration（持续时间），delay（推迟时间），渐变函数（ease、ease-in/out、cubic-bezier等）。

举例说明：

将元素向下偏移20像素，向右偏移20像素 transform: translate(20px, 20px);

当对元素应用变形（transform）属性时，延迟一秒后开始动画，动画速度开始慢，然后加速，最后慢慢结束，动画持续300毫秒 transition: transform 300ms ease 1s; 此时如果你对元素应用transform: translate(20px, 20px);时，一秒钟后，dom元素会逐渐往右下方向移动，直到距离原来下方20像素，右方20像素的位置后停止，动画持续300毫秒。

CSS中translate（-100%）和left：（-100%）区别

在对元素实现显示位置时，经常会用到定位position或者translate属性。

在当子元素的width和height未知时，可以通过设置translate属性来进行水平垂直居中。

在translate函数中的百分比的计算是通过该元素的content，padding，border为标准来计算的。

在使用translate或者position都会使元素产生位移，其中的区别在于 offsetLeft 和 offsetTop 属性上

offsetLeft : 258

test.html:31 offsettop : 108

offsetLeft : 208

test.html:31 offsettop : 108

使用?translate?的offsetTop和?offsetLeft?与没有产生位移的元素没有区别，这offsetTop和?offsetLeft?的值都是 固定不变 的。

offsetLeft :8

test.html:29 offsettop : 8

offsetLeft :8

test.html:29 offsettop : 8

css3 translate 到底用来干嘛

这是让元素产生2D位移，比如

transform:translate(100px,20px) 是右移100像素，下移20像素；

transform:translate(-50px,-10px) 是左移50像素，上移10像素