我们知道translate元素是让元素从当前位置移动，根据我们给定的坐标来进行位移，下面就给大家详细的解读一下translate，以及做一个小案例帮助大家理解，一起来看一下。
translate()素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标）
translate(x,y)定义2d转换 xy为数字 x正为右 负为左 y正为下 负为上
translate3d(x,y,z)定义3D转换
scale()方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
立即学习“前端免费学习笔记（深入）”；
scale(x,y)定义2D转换 x y 为倍数
scale(2,4)把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
rotate()方法 素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
rotate(30deg)表示旋转30度
matrix()方法
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
transition过渡属性transition-property 属性规定应用过渡效果的 CSS 属性的名称 比如：width
transition-property: none|all|property;
transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-timing-function属性规定过渡效果的速度曲线。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); ease：规定慢速开始，然后变快
transition-delay 属性规定过渡效果何时开始。
例子：
div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
