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

Question

我正在尝试使“悬停翻转时的 css3”效果在引导缩略图上起作用。它适用于简单的 div (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);
}

但是当尝试对引导缩略图使用相同的技术时，包含缩略图的相应行的列会重叠 (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 div 的绝对定位这一事实有关，这是 .front div 位于 .back 之上所必需的

任何想法如何解决这个问题？

Answer 1

为了在使用绝对定位时保留引导程序的间距/样式，您可以使用 position:relative 创建一个包装 div，然后将缩略图的大小限制为它。

（对于下面包含的 sn-p，我将您的 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>