明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

css 、jquery完成3d立體旋轉

發(fā)表時間：2024-05-13 來源：明輝站整理相關軟件相關文章人氣：

[摘要]一個用css和jquery實現(xiàn)的3d立體旋轉，免費提供源碼~~可以供您研究哦~~代碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>PHP中文網(wǎng)<...
一個用css和jquery實現(xiàn)的3d立體旋轉，免費提供源碼~~可以供您研究哦~~

UC0PX8`){OLD053S0Q`9)]9.png

代碼：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
		<title>PHP中文網(wǎng)</title>
		<style>
			*{margin: 0;padding: 0;}
			ul,li{list-style: none;}
			#box {
				width: 800px;
				height: 360px;
				position: relative;
				margin: 100px auto;
				perspective: 800px;
				perspective-origin: right;
				border: 1px solid #ccc;
				
			}
			
			#inner {
				width: 10px;
				height: 360px;
				transform-style: preserve-3d;
				float: left;
				transform: rotateX(0deg);
				transform-origin: 50% 50% -180px;

			}
			
			#inner li {
				
				width: 10px;
				height: 360px;
				position: absolute;

				

			}
			
			#inner li:nth-child(1) {
				background:yellow;
				
				
			}
			
			#inner li:nth-child(2) {
				background: green;
				perspective-origin: bottom;
				transform: rotateX(90deg);
				top:-360px;
				transform-origin: bottom;
				background: red;
				
			}
			
			#inner li:nth-child(3) {
				background: blue;
				transform: translateZ(-360px) rotateX(180deg) translateY(360px);
				background:blue;
				transform-origin:bottom;
			}
			
			#inner li:nth-child(4) {
				background: yellow;
				top:360px;
				transform: rotateX(-90deg);
				transform-origin: top;
				background:green;
			}
			#btn{margin: 0 auto;border: 1px solid #f00;width: 800px;
				height: 60px;}
			#btn input{width: 40px;height: 30px;background: #ccc;}
		</style>
	</head>

	<body>
		<div id="box">
			<ul id="inner">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			
		</div>
		<div id="btn">
			<input type="button" value="一" />
			<input type="button" value="二" />
			<input type="button" value="三" />
			<input type="button" value="四" />
		</div>
		<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
		<script>
		for(var i=0;i<=78;i++){
			$("#box").append($("#inner").clone(true))
			
		}
		for(var k=0;k<=80;k++){
			$("#box ul").eq(k).children().css("background-position",-10*k+"px")
		}
		$("#btn input").click(function(){
			for(var j=0;j<=80;j++){
				$("#box ul").eq(j).css("transition",300+j*100+"ms")
				$("#box ul").css("transform","rotateX("+90*$(this).index()+"deg)")
				
				
			}
		})
		</script>
	</body>

</html>

免費拿去研究吧！更多好的源碼盡在PHP中文網(wǎng)，關注我們給你好看哦~

相關推薦：

css波紋動畫

jquery實現(xiàn)手勢解鎖源碼

原生js實現(xiàn)可移動的提示div框源碼

以上就是css 、jquery實現(xiàn)3d立體旋轉的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。