CSS3常用转换总结

/* 实现div向左移动50个像素，并向下移动100个像素 */

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

/* 实现div顺时针旋转30度 */

div
{
            transform: rotate(30deg);
        -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
}

/* 实现div宽度加长2倍，高度增高3倍 */

div
{
            transform: scale(2,3);
        -ms-transform: scale(2,3);
    -webkit-transform: scale(2,3);
}

/* 实现div在X轴和Y轴上分别倾斜20度和30度 */

div
{
            transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg);
    -webkit-transform: skew(30deg,20deg);
}

/* 实现div旋转30° */

div
{
            transform:matrix(0.8,0.5,-0.5,0.8,0,0);
        -ms-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
    -webkit-transform:matrix(0.8,0.5,-0.5,0.8,0,0);
}

/* 实现div围绕X轴旋转45度 */

div
{
            transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg);
}

/* 实现div围绕Y轴旋转45度 */

div
{
            transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
}

/* 实现div围绕Z轴旋转45度 */

div
{
            transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}