css, jquery pour réaliser une rotation stéréoscopique 3D-tutoriel HTML-php.cn

css, jquery pour réaliser une rotation stéréoscopique 3D

韦小宝

Libérer： 2017-11-18 10:55:50

original

2028 Les gens l'ont consulté

Une rotation tridimensionnelle 3D implémentée en utilisant css et jquery code source gratuit~~ disponible pour votre étude~~.

css, jquery pour réaliser une rotation stéréoscopique 3D

Code :

<!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>

Copier après la connexion

Obtenez-le gratuitement et étudiez il! D'autres bons codes sources sont disponibles sur le Site Web PHP chinois, suivez-nous pour vous donner un bon aperçu~

Recommandations associées :

animation d'ondulation CSS

jquery pour implémenter le code source de déverrouillage par geste

Js natif à implémenter Code source du cadre div d'invite mobile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!