CSS3 - 变换（Transform）的使用，以及变换的过渡

2015-12-20 发布：hangge 阅读：13513

1，变换函数

translateX(x)：在水平方向移动元素，正值向右移动。

translateY(y)：在垂直方向移动元素，正值向下移动。

translate(x,y)：在水平和垂直方向移动元素。

scaleX(x)：在水平方向缩放元素（1.0是原始大小）。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。

scaleY(y)：在垂直方向缩放元素（1.0是原始大小）。使用负值会将元素绕x轴翻转，创建一个从下到上的镜像。

scale(x,y)：在水平和垂直方向缩放元素。

rotate(angle)：围绕元素中心顺时针旋转。用负值则逆时针旋转。

skewX(angle)：在水平方向倾斜元素。上下边缘仍然水平，左右边缘倾斜。

skewY(angle)：在垂直方向倾斜元素。左右边缘不倾斜，上下边缘倾斜。

skew(x-angle,y-angle)：在水平和垂直方向倾斜。

matrix(n1,n2,n3,n4,n5,n6)：用矩阵乘法来变换元素（其他所有的变换都可以使用矩阵乘法来实现）。

2，变换

变换是一个强大的工具，可以移动、缩放、斜切和旋转元素，扭曲它的外观。要用 transform 属性即可实现变换。

（变换不会影响页面中的其他元素，也不会影响布局。比如通过变换放大某个元素，那么该元素会简单地覆盖相邻元素）

以如下图片为例：

（1）旋转元素及其内容

下面使用rotate()函数把元素围绕其中心点旋转了20度。

<style>
.rotatedElement {
	transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
}
</style>

<img src="logo5.png" class="rotatedElement"/>

（2）连续使用多种变换效果

下面先把元素变成原来的1.2倍，再向右移动30个像素，然后又斜切了-15度。

.rotatedElement {
	transform: scale(1.2) translateX(30px) skew(-15deg);
	-ms-transform: scale(1.2) translateX(30px) skew(-15deg);
	-webkit-transform: scale(1.2) translateX(30px) skew(-15deg);
}

（3）修改默认参照点。
一般变换是以元素的中心点为参照点的。可以通过在应用变换前用 transform-origin 属性来移动这个参照点。
比如：

transform-origin: 0% 0%; 表示左上角为参照点
transform-origin: 100% 0%; 表示右上角为参照点
transform-origin: 50% 200%; 表示参照点x坐标是元素水平方向的中间，y坐标是从上边缘向下两倍于元素高度的地方。

下面让元素围绕元素的左上角旋转45度：

.rotatedElement {
	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;

	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

（4）移除所有的变换效果

要移除所有的变换效果，可将 transform 属性设置为 none

.rotatedElement {
	transform: none;
	-ms-transform: none;
	-webkit-transform: none;
}

3，3D变换

除了在二维空间移动元素，CSS3还可以用3D变换在三维空间移动、旋转和弯曲元素。

具体样例可以查看这里：http://css3.bradshawenterprises.com/transforms/#css3dtransforms

4，使用变换的过渡

通常变换和过渡是组合使用的。比如下面以一个在线影集为例，当鼠标移动到图片上时，图片会旋转并放大。而鼠标离开时，图片又会收缩并回到原位。这些变换是有过渡效果的。

在线演示如下：

代码如下：

<!doctype html>
<html lang="en">
	<head>
	<title>hangge.com</title>
	<style>
		.gallery {
			margin:0px 30px 0px 30px;
			background: #D8EEFE;
			padding: 10px;
		}

		.gallery img{
			margin: 5px;
			padding: 5px;
			width: 75px;
			border: solid 1px black;
			background: white;
			transition: all 1s;
			-webkit-transition: all 1s;
		}

		.gallery img:hover {
			transform: scale(2.2) rotate(10deg);
			-ms-transform: scale(2.2) rotate(10deg);
			-webkit-transform: scale(2.2) rotate(10deg);
		}
	</style>
</head>
<body style="padding-top:100px">
	<div class="gallery">
		<img src="g1.jpg"/>
		<img src="g2.jpg"/>
		<img src="g3.jpg"/>
		<img src="g4.jpg"/>
	</div>
</body>
</html>