CSS变形转换-学习笔记

CSS的变形转换
属性：transform
一、translate-位移 常用 该属性值有三种类型：“translateX”translateY”和“translate。“translate”可以作用于已经执行了“绝对定位（position：absolute）”的元素，而要用“position”已经设置为了“绝对定位”的元素使用“相对定位（position：relative）”需要对布局进行重新计算，或修改DOM的标签嵌套方式。
二、transform之缩放scale
该属性值会让元素以当前元素的中心进行缩放，参数的值为一个整数或浮点数，如：“1（默认）”不进行缩放，“0.8”缩小为原来的80%，“1.5”扩大到原来的150%，参数不需要单位。
该属性值有三种类型：“scaleX”、“scaleY”和“scale”：“scaleX”设置元素在X轴方向的缩放，“scaleY”设置元素在Y轴方向的缩放，“scale”可以同时设置元素在X轴和Y轴方向的缩放，参数间用逗号“,”进行分隔。
三、transform之旋转rotate 常用
该属性值会让元素以当前元素的中心(X=width/2，Y=height/2)进行旋转（若不对“transform-origin”进行设置），旋转的角度为参数所设定的值，“正数”是顺时针，“负数”是逆时针，单位为“deg”。该属性值有三种类型：“rotateX”、“rotateY”和“rotate（也作rotateZ）”：“rotateX”设置元素在X轴方向的旋转，“rotateY”设置元素在Y轴方向的旋转，“rotate”设置元素在Z轴（垂直于元素平面的线）方向的旋转。
三、 transform之倾斜 skew
该属性值会让元素根据水平（X轴）和垂直（Y轴）线参数设定倾斜角度。该属性值有三种类型：“skewX”、“skewY”和“skew”。“skewX”只有一个参数，用于控制元素在水平轴方向的倾斜，“skewY”只有一个参数，用于控制元素在垂直轴方向的倾斜，“skew”有两个参数（一个参数相当于“skewX”），分别控制元素在水平和垂直轴方向的倾斜，参数间用逗号“,”进行分隔。
四、组合值
五、变换原点“transform-origin”
六、3D嵌套样式“transform-style”
七、3D透视“perspective”和“perspective-origin”
八、3D翻转背面可见性“backface-visibility”