Question

我遇到了一个问题，我正在尝试使用CSS3动画制作一些效果。

我有一个投资组合项目网格，在悬停时，翻转以显示有关每个项目的一些信息。

这在FF中运行良好，但在Chrome中它会有一些小错误。

我创建了一个简单的小提琴，显示问题http://jsfiddle.net/NX7GM/2/，以下是使用的代码;

HTML

<a href="#">

    <div class="flipper">

        <div class="front">

            <img src="http://placehold.it/300/300" alt="#"/>

        </div><!--/.front-->

        <div class="back">

            <div class="table">

                <div class="table-cell">

                    <h2 class="big-title">Title</h2>

                </div><!--/.table-cell-->

            </div><!--/.table-->

        </div><!--/.back-->

    </div><!--/.flipper-->

</a>

CSS

*, *:after, *:before {
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
} 

.work-item{
    display:inline-block;
    margin:0 30px 30px 0
}

.flip-container {
    perspective: 1000;
    -webkit-perspective:1000;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.flip-container:hover .back {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.flip-container:hover .front {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 300px;
    height: 300px
}

.flipper {
    transition: 0.6s;
    -webkit-transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility:hidden;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    border:#fff 4px solid;
    box-shadow: 0px 2px 6px -2px #999;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.back {
    background:#bfdb00;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#c0dc00), to(#a3bb00));
    background: -webkit-radial-gradient(circle, #c0dc00, #a3bb00);
    background: -moz-radial-gradient(circle, #c0dc00, #a3bb00);
    background: -ms-radial-gradient(circle, #c0dc00, #a3bb00);
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    padding:50px;
    text-align:left
}

.back .big-title{
    font-size:20px;
    text-shadow:1px 1px 1px rgba(0, 0, 0, .3);
    letter-spacing:normal;
    line-height:24px;
    margin-bottom:10px
}

Answer 1

这种情况正在发生，因为.front和.back都处于绝对位置（导致包含a崩溃，因为其内容超出正常流量，并且其显示为内联）。

由于.flip-container具有明确的高度，您可以将a设置为100％高度（并将其显示更改为阻止）。这使得它占据容器的高度/宽度并允许整个卡片悬停。 Here's an example.

.flip-container a {
    display: block;
    height: 100%;
}

webkit中的CSS转换问题

1 个答案: