我主要使用此功能(请参阅https://jsfiddle.net/90ycrope/1/)但是第二个div中带有“后面”一词的内容始终可见。
我想要实现的两个目标是:
更正功能(背后可见内容,前面可见前面的内容)
效率 - 我认为代码有一种更简单的方法吗?
HTML:
<div class="box_holder">
<div class="front">Some content here</div>
<div class="back">Behind</div>
</div>
jQuery的:
$(document).ready(function () {
$('.box_holder').click(function () {
$(this).toggleClass('show_info')
});
});
CSS:
.box_holder {
display: block;
position: relative;
float: left;
left: 8px;
top: 8px;
width: 240px;
height: 335px;
text-align: center;
font-family:'ProximaNova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
background: #C3C3C3;
color: #3b3b3b;
font-size: 1em;
line-height: 1.32;
margin-right: 16px;
margin-bottom: 32px;
transition: 1s;
}
.box_holder.show_info {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.box_holder.show_info .front {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.box_holder.show_info .back {
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front {
backface-visibility:hidden;
transition:1s;
}
.back {
transition:1s;
}
.show_info .back {
}
答案 0 :(得分:7)
这是翻转动画的简约版和固定版。以下是我所做的:
position: relative
。backface-visibility
设置为隐藏。这是键属性,因为它可以防止元素的背面显示。
$(document).ready(function() {
$('.box_holder').click(function() {
$(this).toggleClass('show_info')
});
});
&#13;
.box_holder {
position: relative;
width: 240px;
height: 335px;
}
.box_holder .front, .box_holder .back {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
text-align: center;
background: #C3C3C3;
color: #3b3b3b;
transition: 1s;
backface-visibility: hidden;
}
.box_holder .back {
transform: rotateY(180deg);
}
.box_holder.show_info .back {
transform: rotateY(0deg);
}
.box_holder.show_info .front {
transform: rotateY(-180deg);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="box_holder">
<div class="front">Some content here</div>
<div class="back">Behind</div>
</div>
&#13;
注意:使用前缀免费库只是为了避免添加使代码膨胀的前缀版本。