css3中的变形（transform）

transform 字面上的意思就是 使改变外观、改变形态

在css3中transform主要包括如下几种

1.旋转 rotate

2.倾斜 skew

3.缩放 scale

4.移动 translate

下面咱们就一块儿来看看transform的rotate、skew、scale、translate具体如何实现。

语法

transform：none

transform：rotate | skew | scale | translate

none：表示不进行变换

表示一个或多个变换函数，空格分开，意思就是咱们同时对一个元素进行transform的多种属性操做，使用多个属性时须要有空格隔开

##1、旋转rotate

transform:rotate()； 旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”

rotate()方法， 经过指定的角度参数对元素指定一个2D rotation(2D旋转)

在一个给定度数顺时针旋转的元素。负值是容许的，这样是元素逆时针旋转。

下面我就作一个“福字”例子

html

<div class="box">

	<div class="box1">

		福

	</div>

</div>	

复制代码

css

<style>
	html,body{
		height: 100%;
		margin: 0;
		padding: 0;
		position: relative;
	}
	.box{
		width: 100px;
		height: 100px;
		background: red;
		position: absolute;
		left:calc(50% - 50px);
		top:calc(50% - 50px);
				
		transform: rotate(45deg);
	}
	.box .box1{
		font-size: 50px;
		font-weight: bold;
		text-align: center;
		line-height: 100px;
				
		transform: rotate(135deg);
	}
</style>

复制代码

例：

##2、倾斜 skew

倾斜具备三种状况

skew(x,y)使元素在水平和垂直方向同时倾斜（X轴和Y轴同时按必定的角度值进行倾斜变形）；

skewX(x)仅使元素在水平方向倾斜变形（X轴倾斜变形）；

skewY(y)仅使元素在垂直方向倾斜变形（Y轴倾斜变形）

##3、缩放 scale

缩放scale和倾斜skew是极其类似，也具备三种状况

scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；

scaleX(x)元素仅水平方向缩放（X轴缩放）；

scaleY(y)元素仅垂直方向缩放（Y轴缩放）

但它们具备相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，若是其值大于1元素就放大，反之其值小于1，元素缩小。

##4、移动translate

移动translate和skew、scale同样一样具备三种状况

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；

translateX(x)仅水平方向移动（X轴移动）；

translateY(Y)仅垂直方向移动（Y轴移动）

如下列出了全部的转换属性

2D转换方法

若是文中有不妥或者错误的地方还望高手的您指出，以避免误人子弟。

若是您有更好的建议，不如留言一块儿讨论，共同进步！ 再次感谢您耐心的读完本篇文章。

vx:bsl521921