3D 입체 회전을 달성하기 위한 CSS, jquery
- 韦小宝원래의
- 2017-11-18 10:55:502084검색
A 3D 3차원 회전을 css 및 jquery로 구현, 무료 소스 코드~~학습에 사용 가능~~
코드:
<!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 중국어 웹사이트에서 보실 수 있습니다. 팔로우하시면 잘 보실 수 있습니다~
관련 추천:
네이티브 js는 이동 가능한 프롬프트 div 상자 소스 코드를 구현합니다
위 내용은 3D 입체 회전을 달성하기 위한 CSS, jquery의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 리플 애니메이션다음 기사：CSS 리플 애니메이션