translateX（）方法3D转换

空间转换

1.什么是空间转换？

​ a)通俗：立体转换(3d)

​ b)专业：本质上就是一个css属性transform

2.空间转换有什么用？

​ a)可以在平面中设置立体的效果

3.空间转换怎么用？

​ a)空间位移

​ b)空间旋转

​ c)空间缩放

1.空间转换中的坐标轴

x轴：

y轴：

Z轴：空间立体中虚拟抽象的一个坐标轴

2,空间坐标轴的正方向

x轴：从左向右

y轴：从上向下

z轴：从里向外，指向我们方向

空间转换位移：3种写法

a)X轴位移：transform:translateX(值)

b)y轴位移：transform:translateY(值)c)

Z轴位移：transform:translateZ(值)

d)综合写（了解）：transform:translate.3d(值1，值2，值3)；

总结

1.如果只是让元素沿着水平方向或者垂直方向位移，则平面转换和空间转换中translatex和translatey效果是一样的

2.空间转换中的位移和平面转换中的位移特点完全一样：

不脱标，可以使用百分比（按照自身元素大小）

注意事项

1.页面中默认是无法预览沿着Z轴位移出现近大远小效果

2.如果希望看到近大远小效果，那么需要给空间转换元素的父元素设置一个透视属性

3.元素沿着Z轴位移本质上元素大小没有改变，只是浏览器为了渲染出近大远小的效果 ，所以我们会看到大小的变化

透视

perspective规定 3D 元素的透视效果。 元素单位是px。

透视属性取值是任意值

推荐值是600-1000px；

空间转换的旋转

1.X轴旋转：transform:rotateX(值deg)

2,Y轴旋转：transform:rotateY(值deg)

3.Z轴旋转：transform:rotateZ(值deg)

空间转换之缩放

写法：

a)x轴缩放：transform:scaleX(倍数)

b)y轴缩放：transform:scaleY(倍数)

c)z轴缩放：transform:scaleZ(倍数)

d)3d缩放写法：transform:scale3d(x轴倍数，y轴倍数，z轴倍数

总结：

1.transform:scaleX(倍数)和transform:scaleY(倍数)效果和平面转换中的缩放完全一样

2.transform:scalez(倍数)和立体图形配合使用，才可以看到效果

动画

1.动画(animation)和过渡(transition)有什么区别？

a)transition过渡动画需要有用户的动作参与，动画才会执行b)animation动画不需要用户动作参与就可以自动执行

1.1 animation和transition的相同点

a)animation和transition都属于补间动画

2.动画有什么作用？

animation动画可以实现自动执行

3.动画如何使用？

a）定义动画集（动画系列）

b）标签调用对应的动画集