一起使用溢出和转换

时间:2014-08-14 18:54:22

标签: css html5 css3

我试图在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);
}

1 个答案:

答案 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;  
    }

然后在页面上以任意方式将按钮放置在卡片区域外的绝对,固定或相对位置。

DEMO http://jsfiddle.net/a_incarnati/ysxeu9w8/1/