html5 旋转效果

最新推荐文章于 2025-05-01 00:18:14 发布

ByRisonBoy

最新推荐文章于 2025-05-01 00:18:14 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 3D 旋转

本文链接：https://blog.csdn.net/Rison_Li/article/details/83956680

HTML5 专栏收录该内容

1 篇文章

订阅专栏

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>

效果展示：