Ninachow的博客园

transform

CSS3 2d转换，可以移动，比例化，反过来，旋转，和拉伸元素。

transform /* 一般写法 */

-ms-transform /* IE 9 */,

-webkit-transform /* Safari and Chrome */

• transform : translate(xpx,ypx) 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
• transform : rotate(xdeg) 在一个给定度数顺时针旋转的元素(-360deg ~ +360deg)。负值是允许的，这样是元素逆时针旋转。
• transform : scale(x,y) 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数,通常取倍数值1，1.5，0.5等。
• transform : skew(xdeg,ydeg) 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。skewX(xdeg);表示只在X轴(水平方向)倾斜。skewY(ydeg);表示只在Y轴(垂直方向)倾斜。
• transform : matrix() matrix()方法和2D变换方法合并成一个。 matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

当transform多个变化组合时，顺序不同，产生的结果也不同

                 

{transform: scale(2) translate(300px,100px);}
{transform: translate(300px,100px) scale(2);}                          
                
            

transform-origin

改变转换的中心点，适用与2D，3D转换。

transform-origin: (x-axis y-axis z-axis);【默认50% 50%】，效果等同于center center

                
{transform-origin:20% 40%;}
{transform-origin:20px 40px 10px;}