CSS3中的2D转换

【前言】

　　本文主要介绍了CSS3新标准中的2D转换。transform

　　【兼容性】

　　Internet Explore 10，Firefox，Opera支持transform属性

　　Chrome和Safari需要前缀-webkit-

　　IE9需要前缀-ms-

　　【整体内容】

　　translate(x,y)【平移】、rotate(x reg)【旋转】、scale(x,y)【缩放】、skew(x deg,y deg)【翻转】、matrix(6参数)【结合】

【translate(left,top)】

　　元素从当前位置进行移动，根据x和y坐标

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
}

【rotate(x deg)】

　　元素以box中心原点为参考，顺时针旋转x度，x可以为负值，表示逆时针旋转

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

【scale(x,y)】

　　元素尺寸增加或减少，根据指定的x(宽度)和y(高度)参数进行

//值scale(2,4)将元素宽度转换成原始宽度的2倍，高度变成原始宽度的4倍
div
{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}

【skew(x,y)】翻转

　　将元素围绕水平线翻转x度，垂直线翻转y度

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}