CSS3提供了2D和3D转换的方法，为元素实现多种变化，2D方法如下：

　　　　transform-origin:　　//该属性用来改变变换的参考点位置，默认参考点为元素左上角；

 

　　　　transform：　　translate()　　/　　scale()　　/　　rotate()　　/　　skew();

　　　　translate(n,n):　　//改变元素位置；

　　　　scale(n,n):　　//对元素进行缩放，其值为1时元素为原始大小；

　　　　rotate(ndeg):　　//旋转角度，需要带单位（deg）；

　　　　skew(ndeg,ndeg):　　//倾斜角度，需要带单位（deg）；

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>2D转换</title>
    <style type="text/css">
        div{
            background: yellow;
            width:200px;
            height: 200px;
            margin:100px auto;
            text-align: center;
            line-height: 200px;
        }
        .test1{
            transform: translate(20px,20px);
        }
        .test2{
            transform: scale(0.8,0.8);
        }
        .test3{
            transform: rotate(30deg);
        }
        .test4{
            transform-origin: 200px 0px;/*以右上角为旋转中心*/
            transform:rotate(30deg);
        }
        .test5{
            transform: skew(20deg,20deg);
        }
    </style>
</head>
<body>
    <div class="test1">11111111</div>
    <div class="test2">22222222</div>
    <div class="test3">33333333</div>
    <div class="test4">44444444</div>
    <div class="test5">44444444</div>
</body>
</html>