css3-2D转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

转换是使元素改变形状、尺寸和位置的一种效果。

2D转换方法

• translate()
• rotate()
• scale()
• skew()
• matrix()

代码

<style>
    .wrap{
        width: 300px;
        padding: 50px;
        margin: 100px 100px;
        border: 1px solid #000;
    }
    .translate{
        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{
        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{
        transform: scale(2,1.5);
        -ms-transform: scale(2,1.5);    /* IE 9 */
        -webkit-transform: scale(2,1.5);    /* Safari 和 Chrome */
        -o-transform: scale(2,1.5);    /* Opera */
        -moz-transform: scale(2,1.5);    /* Firefox */
    }
    .skew{
        transform: skew(30deg,20deg);
        -ms-transform: skew(30deg,20deg);    /* IE 9 */
        -webkit-transform: skew(30deg,20deg);    /* Safari 和 Chrome */
        -o-transform: skew(30deg,20deg);    /* Opera */
        -moz-transform: skew(30deg,20deg);    /* Firefox */
    }
    .matrix{
        transform:matrix(0.866,0.5,-0.5,0.866,0,0);
        -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
        -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
        -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
        -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
    }
</style>


<p>转换之前的div</p>
<div class="wrap">转换之前的div</div>

<p>translate()方法</p>
<div class="wrap translate">
    通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置
</div>

<p>rotate()方法</p>
<div class="wrap rotate">
    通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
</div>

<p>scale()方法</p>
<div class="wrap scale">
    通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）
</div>

<p>skew()方法</p>
<div class="wrap skew">
    通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）
</div>

<p>matrix()方法</p>
<div class="wrap matrix">
    matrix() 方法把所有 2D 转换方法组合在一起。
    matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
</div>

效果

转换之前的div

translate()方法

rotate()方法

scale()方法

skew()方法

matrix()方法