如何翻转多个div
当我使用 CSS3 单击菜单时?
This http://jsfiddle.net/Lucdd/代码仅适用于最后两个div
s :
HTML 代码
<ul class="nav">
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#work">work</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<section class="container">
<div id="card">
<div class="front flipper" id="home">home</div>
<div class="back flipper" id="about">about</div>
<div class="front flipper" id="work">work</div>
<div class="back flipper" id="contact">contact</div>
</div>
</section>
CSS Code
.container {
width: 500px;
height: 360px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#card.flipped {
-webkit-transform: rotateX( 180deg);
-moz-transform: rotateX( 180deg);
-o-transform: rotateX( 180deg);
transform: rotateX( 180deg);
}
#card .flipper {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flipper {
background: #963
}
#card .front {
background: red;
}
#card .back {
background: blue;
-webkit-transform: rotateX( 180deg);
-moz-transform: rotateX( 180deg);
-o-transform: rotateX( 180deg);
transform: rotateX( 180deg);
}
JavaScript 代码
$(".nav li").on("click", function() {
var activeTab = $(this).find("a").attr("href");
// alert(activeTab);
if ($("#card").hasClass("flipped")) {
$("#card").removeClass("flipped");
} else {
$("#card").addClass("flipped");
}
return false;
});
有什么建议 ?
与两个元素一起使用时的翻转动画非常简单,因为有一个背面和一个正面。但是,当需要使用许多元素来实现相同的功能时,它就会变得格外复杂,因为您需要维护如下 3 种状态:
- 翻转 - 这是当一个块进入视野并且旋转为 0 度(基本上没有旋转)时。
- 之前 - 这是翻转元素之前的元素的状态。在此状态下,块沿一个方向旋转 180 度。
- After - 这是翻转元素之后的元素的状态。在此状态下,块沿相反方向旋转 180 度。
因此,基本上,当单击链接时,其之前的块会从 0 度旋转到 180 度,目标块本身会从 -180 度旋转到 0 度(下一个元素保持在 -180 度)。执行这些操作为其提供了链条旋转的外观和感觉。
$(".nav li a").on("click", function() {
var activeTab = $(this).attr("href");
$('#card > div').removeClass('flipped after before');
$(activeTab).addClass('flipped');
$(activeTab).prevAll('.flipper').addClass('before');
$(activeTab).nextAll('.flipper').addClass('after');
return false;
});
.container {
width: 500px;
height: 360px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#card .flipper {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-transition: -webkit-transform 1s, opacity 1s;
-moz-transition: -moz-transform 1s, opacity 1s;
-o-transition: -o-transform 1s, opacity 1s;
transition: transform 1s, opacity 1s;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
background: blue;
opacity: 0;
}
#card .flipper:nth-child(2n) {
background: red;
}
#card .flipper.flipped {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: 1;
opacity:1;
}
#card .flipper.before {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
#card .flipper.after {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="nav">
<li><a href="#home">home</a>
</li>
<li><a href="#about">about</a>
</li>
<li><a href="#work">work</a>
</li>
<li><a href="#contact">contact</a>
</li>
</ul>
<section class="container">
<div id="card">
<div class="flipper flipped" id="home">home</div>
<div class="flipper after" id="about">about</div>
<div class="flipper after" id="work">work</div>
<div class="flipper after" id="contact">contact</div>
</div>
</section>
Note:jQuery 代码可以进一步优化,但我会将微调部分留给您。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)