CSS3-转换与过渡

2D转换

转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。

2D转换方法：

translate() ：通过 translate() 方法，元素将根据给定的 left（x 坐标）和 top（y 坐标）位置参数从其当前位置移动
rotate() ：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
scale() ：通过 scale() 方法，根据给定的宽度（X 轴）和高度（Y 轴），参数元素的尺寸会增加或减少
matrix()：matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

实例：

//值 rotate(30deg) 把元素顺时针旋转 30 度。
div
{
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 */
}

//translateX(n)沿着 X 轴移动元素;translateY(n) 沿着 Y 轴移动元素
//值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
div
{
transform: translate(50px,100px);
......
}

//值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
div
{
transform: scale(2,4);
......
}

//值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
div
{
transform: skew(30deg,20deg);
......
}

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
......
}

3D转换

3D转换有x,y,z三个轴，平时用到的最多的应该是x,y轴，所以主要介绍rotateX()方法与rotateY()方法的使用。
rotateX()方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

<html>
 <head>
	<title>CSS3-1</title>
 </head>
 <style>
	a.box {
		display: block;
		width: 100px;
		height: 100px;
		background: #00f;
		border: 1px solid #000;
	}
	
	a.box:hover {
		
		transform:rotateX(180deg);
	}

	a.box {
		-webkit-transition: all 2.5s;	/*后面会讲到transition的用法*/
	}
 </style>
 <body> 
	<a href="#" class="box"></a>
 </body>
</html>

rotateY()方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。使用与rotateX()方法类似

3D变换结构

标准的嵌套3D变换结构：
　　舞台（perspective,perspective-origin）
　　　　父容器（transform-style: preserve3d）（各种变换）
　　　　　　子元素（各种变换）
　　　　　　子元素（各种变换）
　　　　　　子元素（各种变换）
　　　　　　　...

无嵌套的3D变换结构：
　　舞台（perspective,perspective-origin）
　　　　子元素（各种变换）
　　　　子元素（各种变换）
　　　　子元素（各种变换）
　　　　　　　...

3D转换属性

perspective：应用于舞台元素，规定 3D 元素的透视效果。为元素定义perspective属性时，其子元素会获得透视效果。
perspective-origin:应用于舞台元素，与perspective配合使用，子元素会获得透视效果,规定 3D 元素的底部位置。可以理解为眼睛所看的位置，默认舞台中心点。几种设置方法，如

perspective-origin: 0px 100px; （使用具体数值）
perspective-origin: 0% 50%;　（使用百分比）
perspective-origin: left center; （共3种： left/center/right）

transform-style（该属性是为了嵌套3D元素而使用的）：规定被嵌套元素如何在 3D 空间中显示。用于动画子元素的父元素，也就是容器，具有两个作用，首先使子元素具有透视效果，其次使子元素保留父元素的3D位置（transform-style:preserve-3d）。
transform-origin：允许你改变被转换元素的位置
backface-visibility：定义元素在不面对屏幕时是否可见，用于动画子元素。

过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

浏览器支持

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长

应用于宽度属性的过渡效果，时长为 2 秒：

div
{
transition: width 2s;/*若有多个属性用逗号分隔，若有全部属性用all即可*/
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

过渡属性

transition: 简写属性，用于在一个属性中设置四个过渡属性。
transition-property: 规定应用过渡的 CSS 属性的名称。
transition-duration: 定义过渡效果花费的时间，默认是 0。
transition-timing-function: 规定过渡效果的时间曲线，默认是 “ease”。
transition-delay：规定过渡效果何时开始，默认是 0。

实例

<html>
 <head>
	<title>CSS3-1</title>
 </head>
 <style>
	a.box {
		display: block;
		width: 100px;
		height: 100px;
		background: #00f;
		border: 1px solid #000;
	}
	
	a.box:hover {
		width: 200px;
		height: 200px;
		background: #f00;
		transform:rotate(180deg);
	}
	
	a.box {
		transition: all 2s;
		-moz-transition: all 2s;	/* Firefox 4 */
		-webkit-transition: all 2s;	/* Safari 和 Chrome */
		-o-transition: all 2s;	/* Opera */
	}
 </style>
 <body> 
	<a href="#" class="box"></a>
 </body>
</html>