css3 2D 转换 基础语法

2D转换

rotate 转换 指定一个平面类的旋转

有兼容性 可以在前面加上 -webkit- 谷歌内核  -o- opera 内核  -ms- ie内核 -moz-火狐内核

语法：rotate（deg）正顺时针负数逆时针

transform：translateX(相对单位 单位px em 百分比)水平x轴移动 移动顺序左到右  负值右到左

transform:translateY(相对单位 单位px em 百分比)水平垂直Y轴移动 移动顺序上到下 负值 下到上

transform:translate(第一个参数为x,第二个参数为y)  重点 第一个单位x轴不可省略 y轴可以 

缩放 

有兼容性 可以在前面加上 -webkit- 谷歌内核  -o- opera 内核  -ms- ie内核 -moz-火狐内核

 transform:scaleX(单位为0.1开始  1代表不变 超出1的话图片会被拉伸) 往X轴缩放

transform:scaleY(单位0.1开始 1代表不变 超出1的话图片会拉伸) 往Y轴缩放

transform:scale(x,y) 重点 第一个单位x轴不可省略 y轴可以 

transform:scale(-1,1)翻转

斜切 

transform:skewX ( 0deg) 正值逆 逆值顺 

transform:skewY（0deg）正值顺 逆值负

transform:skew()  第一个值为x ，第二个值为Y 如果只设置了第一值 那么第二个默认为0

transform-orign:（x,y,z）设置元素在哪个点旋转  默认是50%,50%