CSS3 Rotate Demo

鼠标滑过下面的按钮:

控制旋转的CSS:

.button:hover {
	transform: rotate(180deg);
	-o-transform: rotate(180deg); /* for Opera */
	-moz-transform: rotate(180deg); /* for Firefox */
	-webkit-transform: rotate(180deg); /* for Safari, Chrome */
	filter:progid: DXImageTransform.Microsoft.BasicImage(rotation=2); /* for IE */
}

控制延时的CSS:

.button {
	transition: transform 1s ease-in-out;
	-o-transition: -o-transform 1s ease-in-out;
	-moz-transition: -moz-transform 1s ease-in-out;
	-webkit-transition: -webkit-transform 1s ease-in-out;
}

防止在Chrome下旋转时出现闪动:

.button {
	-webkit-backface-visibility: hidden;
	/* 设置进行转换的元素的背面在面对用户时是否可见:隐藏 *
	 * http://dotnet.aspx.cc/CSS3/backface-visibility.htm */
}

或:

.button {
	-webkit-transform-style: preserve-3d;
	/* 设置内嵌的元素在 3D 空间如何呈现:保留 3D *
	 * http://dotnet.aspx.cc/CSS3/transform-style.htm */
}