炫意html5
最早CSS3和HTML5移动技术网站之一

HTML5+CSS3旋转练习,用高级浏览器看

HTML5+CSS3旋转练习,看的朋友用高级浏览器看
 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
/*---CSS变形,transform的使用----*/
.rotate3 {
  /* -webkit-transform: matrix(1,0.5,1,1,1,1); */

	margin: 100px auto;
	background:red;
	width: 100px;
	height: 100px; 
	/*-webkit-transform-origin:top left;
	 -webkit-transform:rotate(20deg);*/
	/*-webkit-transition:transfrom 2s;*/
	/*-webkit-transition-property:transform;
	-webkit-transition-duration:2s;*/
	/*-webkit-transition-delay:3s//表示延迟的时间*/
	/*-webkit-transition:width 2s;
	-webkit-transition-timing-function:ease;*/
}
.rotate3:hover{
	/*-webkit-transform: scale3d(2,3,5);*/
	/*background:yellow;*/
	/*width:200px;*/
	/*-webkit-transform:rotate(90deg)*/
	/*-webkit-transform:matrix(2,1.5,1,1,80,30);*/
	/*-webkit-transform-origin:50px 70px;
	 -webkit-transform:rotate(20deg);*/
	/*-webkit-transform:skew(20deg,50deg)//表示倾斜*/
	/*-webkit-transform:translate(100px,100px)//表示移动*/
	/*-webkit-transform:scale(-1)*/
	/*-webkit-transform:scale(2)//放大效果,一个参数表示宽,高同时放大到这个值*/
	/*-webkit-transform:scale(0.5)//缩小效果*/
	/*-moz-transform:rotate(-20deg);//翻转效果
	-webkit-transform:rotate(-20deg);*/
	}

#nav a{ background-color:red; }
	#nav a:hover, #nav a:focus{
		background-color:blue;
		/* 告诉转换去应用到background-color 属性(看起来像一个CSS 参数,不是吗? #foreshadowing)*/
		-webkit-transition-property:background-color;
		-o-transition-property:background-color;
		/* 让它持续两秒钟*/
		-webkit-transition-duration:2s;
		-o-transition-duration:2s;
}
</style>
</head>

<body>
<div id="rotate1" onclick="rotateDIV()" class="rotate3">aa</div>
<div id="rotatey1" onclick="rotateYDIV()" class="rotate3">bbb</div>
<div id="nav"><a href="">aa</a></div>
<script type="text/javascript">
var x, y, n = 0, ny = 0, rotINT, rotYINT
function rotateDIV() {
	x = document.getElementById("rotate1")
		clearInterval(rotINT)
		rotINT = setInterval("startRotate()", 10)
}
function rotateYDIV() {
	y = document.getElementById("rotatey1")
		clearInterval(rotYINT)
		rotYINT = setInterval("startYRotate()", 10)
}
function startRotate() {
	n = n + 1
		x.style.transform = "rotate(" + n + "deg)"
		x.style.webkitTransform = "rotate(" + n + "deg)"
		x.style.OTransform = "rotate(" + n + "deg)"
		x.style.MozTransform = "rotate(" + n + "deg)"
		if (n == 180 || n == 360) {
			clearInterval(rotINT)
			if (n == 360) {
				n = 0
			}
		}
}
function startYRotate() {
	ny = ny + 1
		y.style.transform = "rotateY(" + ny + "deg)"
		y.style.webkitTransform = "rotateY(" + ny + "deg)"
		y.style.OTransform = "rotateY(" + ny + "deg)"
		y.style.MozTransform = "rotateY(" + ny + "deg)"
		if (ny == 180 || ny >= 360) {
			clearInterval(rotYINT)
			if (ny >= 360) {
				ny = 0
			}
		}
}
</script>
</body>
</html>

炫意HTML5 » HTML5+CSS3旋转练习,用高级浏览器看

CSS3教程HTML5教程