1. 程式人生 > >html5 旋轉效果

html5 旋轉效果

html5 旋轉樣例:

程式碼片段:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3D旋轉</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#box{
				width: 300px;
				height: 300px;
				/*background-color: red*/
				margin: 100px auto;
				/*相對定位*/
				position: relative;
				transform-style: preserve-3d;
				animation: moveRect 2s linear infinite paused;		
			}
			@keyframes moveRect{
				from{
					/*perspective表示透視點*/
					/*transform:perspective()*/
					transform: perspective(1200px) rotateX(0) rotateY(0);
				}
				to{
					transform: perspective(1200px) rotateX(360deg) rotateY(360deg);
				}
			}
				#box div{
					width: 300px;
				    height: 300px;
				    /*絕對定位*/
				   position: absolute;
				   font-size: 50px;
				   text-align: center;
				   line-height: 300px;
				   font-weight: bold;
				}
				#box div:nth-of-type(1){
					background-color: red;
					transform: translateZ(150px);
				}
				#box div:nth-of-type(2){
					background-color: orange;
					transform: translateZ(-150px);
				}
				#box div:nth-of-type(3){
					background-color: yellow;
					transform: rotateX(90deg) translateZ(150px);
				}
				#box div:nth-of-type(4){
					background-color: blue;
					transform: rotateX(-90deg) translateZ(150px);
				}
				#box div:nth-of-type(5){
					background-color: turquoise;
					transform: rotateY(90deg) translateZ(150px);
				}
				#box div:nth-of-type(6){
					background-color: lawngreen;
					transform: rotateY(-90deg) translateZ(150px);
				}
			    input{
			    	width: 200px;
			    	height: 50px;
			    	background-color:powderblue ;
			    	font-size: 30px;
			    	color: white;
			    	margin: 150px auto;
			    	display: block;
			    	border-radius: 50%;
			    	outline: none;
			    	align-content: center;
			    }
		</style>
	</head>
	<body>
		<div id="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
		<input type="button" value="開始"/>
	</body>
	<script>
		var btn = document.querySelector("input");
		var box = document.querySelector("#box");
		btn.onclick = function(){
			if(this.value == '開始'){
				this.value = '暫停';
				box.style.animationPlayState = 'running';
			}else{
				this.value = '開始';
				box.style.animationPlayState = 'paused';
			}
		}
	</script>
</html>

效果展示: