css, jquery to achieve 3D stereoscopic rotation-HTML Tutorial-php.cn

css, jquery to achieve 3D stereoscopic rotation

韦小宝

Release： 2017-11-18 10:55:50

Original

2046 people have browsed it

A 3d three-dimensional rotation implemented using css and jquery, free source code~~can be used for your research~~

css, jquery to achieve 3D stereoscopic rotation

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>

Copy after login

Get it for free and study it! More good source codes are available on PHP Chinese website, follow us and give you a good look~

Related recommendations:

css ripple animation

jquery implements gesture unlocking source code

Native js implements movable prompt div Frame source code

The above is the detailed content of css, jquery to achieve 3D stereoscopic rotation. For more information, please follow other related articles on the PHP Chinese website!