Simonecss3如何实现位移变换translate
的有关信息介绍如下：
css3的变换（transform）属性主要有两个作用：
1、构建一些css2中难以构造的图形，把一些有ps做的工作交个浏览器渲染本身；
2、配合JavaScript制作更为丰富的动画。
transform的兼容性如下：
ie10、Firefox、Opera支持transform属性
ie9支持替代的-ms-transform属性（仅适用于2D转换）
Safari和Chrome支持替代的-webkit-transform属性（3D和2D转换）
Opera值支持2D转换
注意：transform的兼容性，这里不再赘述，具体代码可查看上一篇经验：
《CSS3如何实现旋转变换》：https://jingyan.baidu.com/article/908080221114e4fd91c80f97.html
transform的属性translate参数定义了元素的位移，基本用法：
transform:translate(x,y)；定义2d转换
例子：
示例说明：为了对比元素的位移效果，这里添加了父级容器#box，及同级元素类名为div2（红色部分）作为偏移元素的参照物
css部分：
#box1{
position: relative;
margin:50px auto;
overflow: hidden;
width:600px;
height: 600px;
孝轿薪 border:2px solid darkcyan;
}
.div1{
width: 200px;
height:200px;
background: seagreen;
color: #fff;
text-align: center;
transform: translate(100px,20px);
}
.div2{
width: 20px;
height:20px;
background: red;
z-index: 100;
position: absolute;
left: 0;
top: 0;
}
html部分：
分别沿x、y轴偏移100px,20px
效果如图：
使蚂狠用translateX(x)，通过编辑X 轴的值，来定义位移变换。板轿表示元素在x轴方向上位移量为x
例子：
css部分：
#box1{
position: relative;
margin:50px auto;
overflow: hidden;
width:600px;
height: 600px;
border:2px solid darkcyan;
}
.div1{
width: 200px;
height:200px;
background: seagreen;
color: #fff;
text-align: center;
transform: translateX(200px);
}
.div2{
width: 20px;
height:20px;
background: red;
z-index: 100;
position: absolute;
left: 0;
top: 0;
}
html部分：
分别沿x轴偏移200px
效果如图：
使用translateY(y)，通过编辑Y 轴的值，来定义位移变换。表示元素在y轴方向上位移量为y
例子：
css部分：
#box1{
position: relative;
margin:50px auto;
overflow: hidden;
width:600px;
height: 600px;
border:2px solid darkcyan;
}
.div1{
width: 200px;
height:200px;
background: seagreen;
color: #fff;
text-align: center;
transform: translateY(200px);
}
.div2{
width: 20px;
height:20px;
background: red;
z-index: 100;
position: absolute;
left: 0;
top: 0;
}
html部分：
分别沿y轴偏移200px
效果如图：
使用translateZ(z)，通过编辑Z轴的值，来定义位移变换。表示元素在z轴方向上位移量为z
例子：
css部分：
#box1{
position: relative;
margin:50px auto;
overflow: hidden;
width:600px;
height: 600px;
border:2px solid darkcyan;
}
.div1{
width: 200px;
height:200px;
background: seagreen;
color: #fff;
text-align: center;
transform: translateZ(200px);
}
.div2{
width: 20px;
height:20px;
background: red;
z-index: 100;
position: absolute;
left: 0;
top: 0;
}
html部分：
沿Z轴偏移200px
效果如图：
使用translate3d(x,y,z），通过编辑x,y,z的值，来定义3D 位移变换。表
例子：
css部分：
#box1{
position: relative;
margin:50px auto;
overflow: hidden;
width:600px;
height: 600px;
border:2px solid darkcyan;
}
.div1{
width: 200px;
height:200px;
background: seagreen;
color: #fff;
text-align: center;
transform: translate3d(100px,200px,50px);
}
.div2{
width: 20px;
height:20px;
background: red;
z-index: 100;
position: absolute;
left: 0;
top: 0;
}
html部分：
沿x,y,Z轴偏移100px,200px,50px
效果如图：
