1.对于行内元素是无效的
2.会保留原来的位置,提高盒子的层级 与relative相对定位类似
transform: translate(X,Y)
1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px
其中如果数值为负数,则位移的方向相反
2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离
transform: rotate(X)
需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)
元素将会默认在自身的垂直水平居中点进行旋转对应的X度
transform-origin: X Y
可以通过改变元素的该属性,导致元素旋转的原点进行改变
1.填入的X Y值为方位名词,例如top\bottom\left\right
例子: transform-origin: left top 元素将在元素的左上角为原点进行旋转运动
transform: scale(X)
可以通过改变元素的该属性,导致元素进行X倍的缩放X为负数时将会产生镜面效果
例子: transform: scale(1.2) 元素将变为原来的1.2倍.
transform连写,如果有发生平移,都需要先写平移属性
例子 transform: translateX(300%) rotate(360deg)
可以在发生transform的元素中设置transition属性
例子: transition: 1s 代表触发元素发生变化后,变化将于1s内完成
表面上看，需要设置两个点，实际上包含了两个掩藏点 起始点 (0,0) 和 终点 (1,1) 。所以实际上应该是以下效果。
可以看出，贝塞尔曲线是由4个点构成的一条线，可能是任意形状的线。下面给出一些线型例子来说明。
这种运动模式下 x1 ∈ [0, 0.5], 且 y1 >x1 且 x2 ∈ [0.5, 1] 且 y2 <x2 。此时的运动轨迹习惯上称之为 ease ，下面给出一个夸张点的图像：
这种模式下，x1 ∈ [0, 1] 且 y1 <x1 且 x2 ∈ [0, 1] 且 y2 <x2 。 此时的运动轨迹成为 ease-in ，下面是示意图：
这种模式是与 3 的情况相反，所以 x ∈ [0, 1] 且 y >x 时，这里两个点都要符合这种情况才能实现。习惯上称这种情况为 ease-out ，下面给出示意图：
以上的四种情况中，常见的 ease-in-out 与 ease 的曲线一致，只是 ease-in-out 慢的部分更慢，快的部分更快。
可以用过 这个网站 观察贝赛尔曲线的运动轨迹。
另外，本文参考自
如果你想只向一移的话，你需要修改translate
-webkit-transform:translateY(100px)-moz-transform:translateY(100px)
这样才是向下移动100px，
因为translate
默认是移动XY轴的，意思就是说，移动左右以及上下一起，但是默认平移而已，
如果你想单独操作Y的话，就要translateY，单独操作X用translateX，当然默认translate
(100px)相当于translateX(100px)
如果你想向右移的同时又向下移
-webkit-transform:translate(100px,100px)-moz-transform:translate(100px,100px)
这样你应该能理解translate的用法 了。。。
