transform 转换

2d转换

transform：none | +

• 默认值：none

• 适用于：所有块级元素及某些内联元素

• transform:rotate() 旋转一个角度

• transform:translate([,]?)

  • 在X轴[Y轴]?移动一个距离
  • transform:translateX
  • transform:translateY
  • 默认为0
  • 百分数参照物为当前盒子的大小

• transform:scale([,]?)

  • 缩放倍数
  • 第二个参数省略默认跟第一个值相等

• transform:skew([,]?)

  • 倾斜一个角度
  • 第二个参数默认为0

transform-origin 定位坐标轴的原点

transform-origin：[  |  | left | center① | right ] [  |  | top | center② | bottom ]?

• 默认值：50% 50%，效果等同于center center
• 适用于：所有块级元素及某些内联元素
• 设置或检索对象以某个原点进行转换。
  • 该属性提供2个参数值。
  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
  • 如果提供3个，第三个用于z轴

3d转换

• 透视距离

perspective：none | 

用在变换元素的容器上
： 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

• perspective-origin 设置透视点

perspective-origin：[  |  | left | center① | right ] [  |  | top | center② | bottom ]?

语法跟transform-origin类似

• 指定透视点的位置。
  • 该属性提供2个参数值。
  • 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
  • 如果只提供一个，该值将用于横坐标；纵坐标将默认为center。

• translate3d()

translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatex()： 指定对象X轴（水平方向）的平移 
translatey()： 指定对象Y轴（垂直方向）的平移
translatez()： 指定对象Z轴的平移

• rotate3d()： 3d旋转

rotate3d()： 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()： 指定对象在x轴上的旋转角度 
rotatey()： 指定对象在y轴上的旋转角度 
rotatez()： 指定对象在z轴上的旋转角度 

demo:rotate(0,0,1,45deg)

• scale()： 3d缩放

scale3d()： 指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略 
scalez()： 指定对象的z轴缩放 
scalex()： 指定对象X轴的（水平方向）缩放 
scaley()： 指定对象Y轴的（垂直方向）缩放

• transform-style：设置一个3d平台，保留内部的3d空间

transform-style：flat | preserve-3d

默认值：flat
+ flat： 指定子元素位于此元素所在平面内
+ preserve-3d： 指定子元素定位在三维空间内
+ 当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
+ 决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。

• backface-visibility

backface-visibility：visible | hidden

不可继承
默认值:visible
+ visible： 指定元素背面可见，允许显示正面的镜像。
+ hidden： 指定元素背面不可见