css translate元素属于css3属性，它可以将元素在当前位置，在水平和垂直方向移动。

语法

transform: translate(x)
transform: translate(x,y)
由上可知，translate语法有两种表现形式。其中，我们可以省略y，表示它只在x轴上平移，比如translate(4)等价于translate(4,0)，

参数x：x轴上平移的距离

参数y：y轴上平移的距离

细分语法

translate语法除了上面的语法形式，它还有分别定义x轴、y轴、z轴、3d效果的语法。如下：

  1. translateX() ： X轴平移，正数往右平移，负数，往左平移
  2. translateY()： Y轴平移，正数往下平移，负数，往上平移
  3. translateZ()：向Z轴平移，值越大，感官上元素距离你越近，值越小，感官上元素距离你越远，需要配置rotate属性使用。
  4. translate3d()：同时设置  translateX  ，translateY 和 translateZ的值。

例子

1） x轴平移效果

<!DOCTYPE html>
<html>
<head>
<title>translate() 属性</title>
<style>
.trans {
   transform: translate(100px); /*等价于 translate(100px,0)*/
}
</style>
</head>
<body>
<h2>原始图片</h2>
<img src= "/static/default/images/logo.png">
<h2>平移后的图片</h2>
<img class="trans" src= "/static/default/images/logo.png">
</body>
</html>
效果如图：

css translate 元素移动属性

2）x，y轴同时设置

 <!DOCTYPE html>
<html>
<head>
<title>translate() 属性</title>
<style>
.trans {
   transform: translate(100px,100px); 
</style>
</head>
<body>
<h2>原始图片</h2>
<img src= "/static/default/images/logo.png">
<h2>平移后的图片</h2>
<img class="trans" src= "/static/default/images/logo.png">
</body>
</html>
css translate 元素移动属性