transform 3D变形

transform 3D变形

transform：3D变形可以近似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或者更小。

·translate3d(x,y,z) 定义3D转换。

·translateY(y) 定义转换，只是用Y轴的值。

·translateX(x) 定义转换，只是用X轴的值。

·translateZ(z) 定义3D转换，只是用Z轴的值。

 

·rotate3d(x,y,z) 定义3D旋转。

·rotateX(angle) 定义沿着X轴的3D旋转。

·rotateY(angle) 定义沿着Y轴的3D旋转。

·rotateZ(angle) 定义沿着Z轴的3D旋转。

 

·scale3d(x,y,z) 定义3D缩放旋转。

·scaleZ(z) 通过设置Z轴的值来定义3D缩放旋转。

·scaleX(x) 通过设置X轴的值来定义3D缩放旋转。

·scaleY(y) 通过设置Y轴的值来定义3D缩放旋转。

 

·martrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义3D转换，使用16个值的4x4矩阵。

 

·transform-origin 允许你改变被转换元素的位置。2D转换元素能改变元素x和y轴。3D转换 元素还能改变其Z轴。

 

·perspective(n) 为3D转换定义透视视图。

 

·transform-style 规定被嵌套的元素如何在3D空间中显示。

·flat子元素将不保留其3D位置。

·preserve-3d 子元素将保留其3D位置。

 

实例：

transform:translate3d(0,0,-300px);

transform:translateZ(-500px);

transform:rotate3d(0,1,0,45deg);

transform-origin:right;

transform:scaleZ(2) rotateX(60deg);

transform-origin:top;

perspective:1000px;

transform:scaleZ rotateX(45deg);

来源：https://www.cnblogs.com/wzjie1234/p/10721329.html