CSS3（ 2D转换，3D转换）

2D 转换

        2D变换方法：

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

 第一、translate()方法

                translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

css部分

<style> 

div{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}

div.div2{
	transform:translate(50px,100px);
}
</style>

html部分

<div>这是translate方法</div>

<div class="div2">这是translate方法</div>

 第二、rotate();

css部分
<style>
div{
	width:200px;
	height:100px;
	background-color:yellow;
	transform:rotate(30deg);
    }

</style>
html部分
<div>/div>

正值往右转换，负值往左转换。

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋

 

第三、scale()；方法

                scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

css部分

<style>
div{
	width:100px;
	height:75px;
	background-color:red;
	border:1px solid black;
}

div.div2{
	transform:rotate(30deg);

}
</style>


html部分

<div>这是一个 DIV 元素。</div>

<div class="div2">这是一个 DIV 元素。</div>

 

第四、skew()方法

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

css部分

<style> 
div{
	width:100px;
	height:75px;
	background-color:r