ホームページ > 記事 > ウェブフロントエンド > 3D立体回転を実現するcss、jquery

3D立体回転を実現するcss、jquery

韦小宝オリジナル: 2017-11-18 10:55:502023ブラウズ

cssとjqueryで実現した3D三次元回転、無料のソースコード~~学習用に利用可能~~

コード:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
		<title>PHP中文网</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 中国語 Web サイトで入手できます。フォローしてよく見てください~

3D立体回転を実現するcss、jquery

関連記事