translate3d(CSS translate3d()实例讲解)
一、css3系列之transform详解translate
translate
translate这个参数的，是transform身上的，那么它有什么用呢？
其实他的作用很简单，就是平移，参考自己的位置来平移
translate()
translateX()
translateY()
translateZ()
translate3d()
translateX
向X轴平移，填正数往右平移，填负数，往左平移
translateY
向Y轴平移，填正数往下平移，填负数，往上平移
translateZ
向Z轴平移，这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ()里面的值越大，电脑屏幕离你越远， translateZ()的值就越小。所以说，Z增加，那么这个电脑屏幕，离你就越近，
下面要用到旋转，rotate，不懂的话，请点击→ css3系列之transform详解rotate
首先Z轴是朝向我们的，所以看不出效果，但是，我们把它转个身，让Z轴面对右边，就可以了。
translate()和 translate3d()
translate是同时设置 translateX和 translateY，所以里面可以填两个参数，第一个值 X第二个 Y
translate3d是同时设置 translateX，translateY和 translateZ所以里面可以填三个参数
只不过有点不同的是， translate如果第二个参数不填的话，默认是0，不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。
二、css3translate是什么意思
在CSS3中，translate是一种用于元素变换的CSS属性，它可以改变元素的位置，不影响其在文档流中的位置。translate属性可以应用于2D和3D变换。
在CSS3中，translate属性用于对元素进行平移变换，改变元素在水平和垂直方向上的位置，而不影响其在文档流中的位置。translate属性可以应用于2D和3D变换。
以下是translate属性的常见用法示例：
1、2D平移
.element{ transform: translate(100px, 50px);}
上述示例将.element选择器的元素在水平方向上向右平移100像素，垂直方向上向下平移50像素。
2、3D平移
.element{ transform: translate3d(100px, 50px, 0);}
上述示例将.element选择器的元素在X轴上向右平移100像素，Y轴上向下平移50像素，Z轴上不发生变化。
3、平移指定轴
.element{ transform: translateX(100px); /*或*/ transform: translateY(50px); /*或*/ transform: translateZ(0);}
上述示例分别使用translateX、translateY和translateZ来对元素进行单个轴向的平移变换。translateX用于水平方向上的平移，translateY用于垂直方向上的平移，translateZ用于3D空间中沿Z轴的平移。
除了上述常见用法，translate属性还可以与其他变换属性结合使用，以实现更复杂的效果。例如：
.element{ transform: translateX(100px) rotate(45deg);}
上述示例将.element选择器的元素在水平方向上向右平移100像素，并绕自身中心顺时针旋转45度。
通过调整translate属性的参数值，可以控制元素在平移变换中的位移量。参数可以是长度值（如像素、百分比等）或关键字（如left、right、top、bottom等），根据具体需求进行调整。
translate属性的值是相对于元素自身的初始位置进行计算的。负值表示相反方向的平移。同时，通过使用过渡（transition）和动画（animation）等技术，可以实现平滑的平移效果。
三、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