CSS3 的3D图片切换

本次 用到 CSS3 的

transition（过渡） 属性，

一共有4个属性

transition-property 属性规定  应用过渡效果的 CSS 属性的名称 

transition-duration 属性规定 完成过渡效果需要花费的时间（以秒(s)或毫秒(ms)计）。

transition-timing-function 属性规定过渡效果的速度曲线。

inear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。  匀速
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。  默认  先加速后减速
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 加速
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 减速
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。  贝塞尔曲线

transition-delay 属性规定过渡效果何时开始。值以秒或毫秒计(s   ms)

这些都可以简写：transition: property duration timing-function delay;

transition : width 2s, height 1s  （宽度过渡时间2秒，高度过渡时间1秒）

transform

向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

语法：transform: none|transform-functions;

常用的函数：

rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。

<style type="text/css">
	.box{
		 180px;height: 180px;border: 1px red solid;
		padding: 100px;
		-webkit-perspective:150; /* Safari and Chrome */ //显示3d的效果，只在这两个浏览器中支持，firefox 并不支持
	}
	.box div{
		 100px;height: 100px;
		background: #ff0;
		border: 1px black solid;		
	}
	.box:hover div{
		transform: rotateY(45deg); //沿着Y轴旋转45度
		-webkit-transform: rotateY(45deg); /* Safari and Chrome */
	}
</style>