transform的2D和3D变换

transform取值

none：默认值，即是无转换

matrix(,,,,,)：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate([, ])：
指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX()：
指定对象X轴（水平方向）的平移

translateY()：
指定对象Y轴（垂直方向）的平移

rotate()：
指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义

scale([, ])：
指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX()：
指定对象X轴的（水平方向）缩放

scaleY()：
指定对象Y轴的（垂直方向）缩放

skew( [, ])：
指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX()：
指定对象X轴的（水平方向）扭曲

skewY()：
指定对象Y轴的（垂直方向）扭曲

transform-origin属性

定义：transform-origin 属性允许您改变被转换元素的位置(即是参考点)，
需要了解的是，在transform中的存在的坐标系为，X轴向右，Y轴向下，Z轴朝向屏幕方向

取值：

• 默认值：50% 50% 0 ，基点即是2D所在图形的几何中心，在3D中即是绕着z轴旋转
• 取百分值%，依据坐标轴位置取百分值
• length，依据坐标轴的位置取距离值
• translate取值不受该属性的影响
• 取方向值，left,right,top,bottom
  • center(即是center center或50% 50%)
  • top(即是top center或50% 0)
  • right(即是right center或100% 50%)
  • bottom(即是bottom center或50% 100%)
  • left(即是left center或0 50%)
  • top left(即是0% 0%)
  • top right(即是100% 0%)
  • bottom left(即是0% 100%)
  • bottom right(即是100% 100%)

transform3D

• transform3D,是在translate2D的基础上增加z轴方向上的维度，再通过增加某些3D属性，营造出3D的感觉
• rotate3D,默认情况下rotate的旋转中心是绕着z轴转动的转动方向依据顺正逆负，rotate( deg)=rotatez( deg),rotatex( deg)即是绕x轴由外往内旋转，rotatey( deg)即是绕y轴反向翻书方向旋转
• transform:rotate3D(1,1,1,360deg);即是绕着三维空间的正方向距离起始位置较近的地方旋转
• transform:translatez(100px) 对于x/y轴平移可以使用占用自身尺寸的百分比，z轴则只能使用length
• perspective景深即是我们眼睛注视屏幕的距离，它的作用是搭建舞台。它是一个不可继承的属性，但它可以作用于所有的后代元素。景深越大，灭点（随视角逐渐消失的点）越远，变形越小；景深越小，灭点越近，变形越大
• transform-style的作用亦是搭建舞台，使3D舞台有层次感，该属性值仅作用于父元素

transform的2D和3D变换

原文：https://www.cnblogs.com/mufengs16/p/14044870.html