翻转 Bootstrap 缩略图时 div 的绝对定位

Question

我正在尝试使 "css3 on hover flip" 效果在 bootstrap 缩略图上起作用。它可以在简单的 divs (JsFiddle)

上正常工作

主要CSS3代码：

.front{
    position:absolute;
    transform:perspective(600px) rotateY(0deg);
    backface-visibility:hidden;
    transition: transform .5s linear 0s;
}
.back{
    position:absolute;
    transform:perspective(600px) rotateY(180deg);
    backface-visibility:hidden;
    transition: transform .5s linear 0s;
}
.flip3d:hover > .front{
    transform:perspective(600px) rotateY(-180deg);
}
.flip3d:hover > .back{
    transform:perspective(600px) rotateY(0deg);
}

但是当尝试对 bootstrap 缩略图使用相同的技术时，包含缩略图的各行的列重叠 (JsFiddle)。

<div class="row">
    <div class="item col-sm-6 col-md-4 flip3d">
        <div class="thumbnail front" id="item">
            <img src="http://placehold.it/350x250"/>
            <div class="caption">
                <span>Front1 &nbsp;</span>
                <p>Front1 Description</p>
            </div>
        </div><!-- /.thumbnail-->
        <div class="back thumbnail">
            Some Content
        </div>
    </div>
</div>

我假设这与我使用了 .front 和 .back divs 的绝对定位有关，这是 .front div 位于顶部所必需的.back

有解决此问题的想法吗？

Answer 1

为了在使用绝对定位时保留 spacing/styling bootstrap 的作用，您可以使用 position:relative 创建包装器 div 然后限制缩略图的大小

（对于下面包含的代码段，我将您的 col-* 类更改为 XS，以便它们在所有尺寸下都能正确显示。）

.positioningDiv {
    position:relative;
}

.front{
 transform:perspective(600px) rotateY(0deg);
 backface-visibility:hidden;
 transition: transform .5s linear 0s;
}
.back{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
 transform:perspective(600px) rotateY(180deg);
 backface-visibility:hidden;
 transition: transform .5s linear 0s;
 border:1px solid #000;
}
.flip3d:hover .front{
 transform:perspective(600px) rotateY(-180deg);
}
.flip3d:hover .back{
 transform:perspective(600px) rotateY(0deg);
}
.caption span{
 font-size:large;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
    <div class="row" id="items_row1" >
        <div class="item col-xs-4 flip3d">
            <div class="positioningDiv">
                <div class="thumbnail front" id="item">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Front1 &nbsp;</span>
                        <p>Front1 Description</p>
                        <br>
                    </div>
                </div><!-- /.thumbnail-->
                <div class="back thumbnail">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Back1 &nbsp;</span>
                        <p>Back1 Description</p>
                        <br>
                    </div>
                </div>
            </div>
        </div>
        <div class="item col-xs-4 flip3d">
            <div class="positioningDiv">
                <div class="thumbnail front" id="item">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Front2 &nbsp;</span>
                        <p>Front2 Description</p>
                        <br>
                    </div>
                </div><!-- /.thumbnail-->
                <div class="back thumbnail">
                    <img src="http://placehold.it/350x250"/>
                    <div class="caption">
                        <span>Back2 &nbsp;</span>
                        <p>Back2 Description</p>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- / .items_row1 -->
</div>

翻转 Bootstrap 缩略图时 div 的绝对定位

Absolute positioning of divs while Flipping a Bootstrap Thumbnail

html

css

twitter-bootstrap