Heim >Web-Frontend >HTML-Tutorial >CSS, JQuery, um eine stereoskopische 3D-Rotation zu erreichen
CSS, JQuery, um eine stereoskopische 3D-Rotation zu erreichen
- 韦小宝Original
- 2017-11-18 10:55:502082Durchsuche
Eine dreidimensionale 3D-Rotation, implementiert mit css und jquery. Kostenloser Quellcode~~ für Ihre Studie verfügbar~~
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>Holen Sie es sich kostenlos und lernen Sie Es! Weitere gute Quellcodes finden Sie auf der PHP-Chinese-Website. Folgen Sie uns, um einen guten Einblick zu erhalten~
Verwandte Empfehlungen:
JQuery zum Implementieren des Quellcodes zum Entsperren von Gesten
Native JS zum Implementieren beweglicher Prompt-Div-Frame-Quellcode
Das obige ist der detaillierte Inhalt vonCSS, JQuery, um eine stereoskopische 3D-Rotation zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!