CSS3 2D转换

       CSS3的一大新特性就是加入过渡与动画交互效果。transition(过渡)与animation(动画)属性能够在不使用JavaScript脚本的情况下实现一些简单的动画效果。transform(转换)属性允许移动、旋转、缩放、倾斜元素，可以更加方便地实现动画效果。当然你也可以单独使用来变换元素，在一些情况下可以减少修改素材的成本。

 

目录

translate() 移动

translateX() X轴移动和translateY() Y轴移动

rotate() 旋转

scale() 缩放

scaleX() 和scaleY() X/Y轴缩放

skewX() X轴倾斜

skewY() Y轴倾斜

skew() 倾斜

matrix() 矩阵变换

transform-origin 属性

---

translate() 移动

translate(x,y)方法从当前位置移动元素。在X轴移动x距离，在Y轴移动y距离。

在页面中坐标原点位于左上角，X轴正方向向右，Y轴正方向向下。

#transformed {
    transform: translate(50px,70px);               
}

translateX() X轴移动和translateY() Y轴移动

单独对X轴或Y轴进行移动。上一图效果也可用以下代码实现

#transformed {
    transform: translateX(50px);
    transform: translateY(70px);               
}

rotate() 旋转

rotate(deg)方法将元素旋转deg角度。

#transformed {
    transform: rotate(30deg);               
}

scale() 缩放

scale(w,h)方法将元素的宽度缩放w倍、高度缩放h倍。

#transformed {
    transform: scale(3,2);
}

scaleX() 和scaleY() X/Y轴缩放

单独对X轴或Y轴进行缩放。上一图的效果也可用以下代码实现

#transformed {
    transform: scaleX(3);
    transform: scaleY(2);
}

skewX() X轴倾斜

skewX(deg)方法将元素沿X轴倾斜deg度。

#transformed {
    transform: skewX(20deg);
}

skewY() Y轴倾斜

skewY(deg)方法将元素沿Y轴倾斜deg度。

#transformed {
    transform: skewY(20deg);
}

skew() 倾斜

skew(Xdeg,Ydeg)使元素沿X和Y轴倾斜Xdeg度和Ydeg度。

#transformed {
    transform: skew(20deg,30deg);
}

matrix() 矩阵变换

matrix(a,b,c,d,e,f)方法将所有2D变换方法通过2D变换矩阵组合为一个。这需要一点线性代数知识，其原理如下:

变换后的元素位置变为(ax+cy+e,bx+dy+f)。由此可以得出下列使用方法:

• matrix(1,0,0,1,e,f);——translate(e,f);
• matrix(a,0,0,d,0,0);——scale(a,d);
• matrix(cosθ,sinθ,-sinθ,cosθ,0,0);——rotate(θ);
• matrix(1,tan(θy),tan(θx),1,0,0);——skew(θx,θy);

transform-origin 属性

transform-origin属性用于设置变换的基点。该属性必须在元素有transform变换时才能生效。在2D变换中需要给出基点的x,y坐标。

x坐标的取值可为:

• left
• center
• right
• length
• %

y坐标的取值可为:

• top
• center
• bottom
• length
• % 

默认值中心点

left   center

left    bottom