CSS3transform心得

今天分享一点transform的心得。

transform:

      2d

        平移： transform: translate(x , y); / translateX(x); / translateY(y);

                相对于原位置进行平移，单位(px，%)

        缩放： transform: scale(num[x,y]); / scaleX)(x); / scaleY(y);

                缩放比例相对于本身而言，本身为1,<1为缩小,>1为放大

                单位(数值[可为小数])

                * 缩放相对的位置为重心点[即中心]

                * 这个缩放和图片的高宽等比例扩大缩小的中心点不一样

                * 缩放位置：[width / 2 , height / 2]，图片高宽等比例位置：[0,0]

        旋转： transform：rotate(deg); rotateX(deg); / rotateY(deg);

                X: 对象以中心为基，围绕着x轴旋转

                Y: 对象以中心为基，围绕着y轴旋转

                Z: 对象以中心为基，围绕着z轴旋转

                rotate(deg) 默认时：好像跟rotateZ(deg)是一致的，。。。

        倾斜：...

        透视： transform: perspective(num);  -- 景深...