我试图在Div上添加翻转卡效果。我们的想法是能够看到图像并将其翻转以填充表格。但是形式比图像大,所以我希望能够只滚动"卡的背面"
jsfiddle的来源:http://24ways.org/2010/intro-to-css-3d-transforms/
我需要更改CSS以在显示表单时使用滚动。
正在进行的工作jsFiddle:http://jsfiddle.net/DavidLaberge2014/breb3f0e/
HTML:
<div class="row">
<div class="container">
<div id="card">
<div class="front">
<img src="http://lorempixel.com/250/300/sports/" />
</div>
<div class="back">
<form>
...
</form>
</div>
</div>
</div>
</div>
CSS:
.container {
width:100%;
height:100%;
}
#card {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-webkit-transform-origin: right center;
}
#card div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
#card .front {
}
#card .back {
-webkit-transform: rotateY(180deg);
/*overflow:auto Add this and form gets hidden*/
}
#card.flipped {
-webkit-transform: translateX(-100%) rotateY(-180deg);
}
答案 0 :(得分:2)
为了将滚动条添加到包含表单的翻译div中,您应该:
为卡片提供固定的高度
#card div {
display: block;
position: absolute;
width: 100%;
height: 300px;
-webkit-backface-visibility: hidden;
}
将溢出添加到#card .back容器。
#card .back {
overflow-y:scroll;
width: 100%;
height: 300px;
position:absolute;
}
然后在页面上以任意方式将按钮放置在卡片区域外的绝对,固定或相对位置。