CSS3_transform笔记

1. transform:变形，变换
02. 语法
　　transform:none|rotate|scale|skew|translate|matrix;
　　可以同时给transform绑定多个变换函数，之间以空格隔开。
　　可用于内联元素和块级元素

03. rotate(旋转)
　　rotate(<angle>)
　　参数表示旋转的度数，
　　整数表示顺时针，负数表示逆时针旋转
　　如：
　　transform:rotate(30deg)

04. translate(移动)
　　translate(x, y):x和y方向进行平移，负数向反方向平移。默认基准点为元素中心点。如果只有一个参数，第二个默认为0
　　translateX(x)：水平方向进行平移
　　translateY(y)：垂直方向进行平移
　　如：
　　transform:translate(100px, 20px)

05. scale(缩放)
　　scale(x,y):以基准点为中心，进行缩放，默认基准点是元素中心，如果第二个参数没有指定，则和第一个一样
　　scaleX(<number>)：水平方向进行缩放
　　scaleY(<number>):垂直方向进行缩放
　　如：
　　transform:scale(1.5, 2.0)

06. skew(扭曲)
　　skew(<angle>,<angle>):在x轴y轴上进行斜切变化，如果第二个参数未指定，则为0。默认以元素中心为基点进行扭曲
　　skewX(<angle>)
　　skewY(<angle>)
　　如：
　　transform:skew(10deg,20deg)

07. matrix(矩阵变换)
　　matrix(<number>,<number>,<number>,<number>,<number>,<number>)
　　　　用一个变换矩阵对元素进行变换

08. transform-origin:
　　改变元素的基准点
　　默认情况下transform的rotate translate scale skew matrix等操作都是以元素中心为基准点进行变换的
　　transform-origin:(参数1, 参数2)
　　　　参数1表示水平方向的基准
　　　　参数2表示垂直方向上的基准，如果没有参数2，表示垂直方向值不变
　　　　参数可以是em px 百分比，也可以是字符参数left center bottom top center bottom
　　　　left:0%
　　　　center:50%
　　　　right:100%
　　　　top:0%
　　　　center:50%
　　　　bottom:100%
　　 如：
　　transform-origin:(left,bottom):把变换的基准点设置为左下角