Question

我正在创建一个'书架'，其中包含使用CSS3变换来旋转onHover的书籍。

我的问题是，在几次悬停之后，页面会调整大小并变得更长。我只是在Firefox 12.0中遇到这个问题。

<div id="most-checked-out-books">

    <div class="f1_container">
        <div class="f1_card">
            <div class="book front face">
                <img src="books/new/harryPotter1.png" alt="Harry Potter (series)" />
            </div>
            <div class="back face center">
                <em>Harry Potter (series)</em>
                <br /><hr />
                By: J.K. Rowling
                <br /><hr />
                Checked Out <b>425</b> Times
                <br /><hr />
                <a href="#" title="Find 'Harry Potter' in PolyCat"><i class="icon-share-alt"></i><br />Find in PolyCAT</a>
            </div>
        </div>
    </div> <!-- END CONTAINER -->

    <div class="f1_container">
        <div class="f1_card">
            <div class="book front face">
                <img src="books/new/ofMiceAndMen.png" alt="Of Mice and Men" />
            </div>
            <div class="back face center">
                <em>Of Mice and Men</em>
                <br /><hr />
                By: John Steinbeck
                <br /><hr />
                Checked Out <b>201</b> Times
                <br /><hr />
                <a href="#" title="Find 'Of Mice and Men' in PolyCat"><i class="icon-share-alt"></i><br />Find in PolyCAT</a>
            </div>
        </div>
    </div> <!-- END CONTAINER -->         

</div><!-- END MCO BOOKS -->

CSS

.f1_container {
    height: 214px;
    margin: 0px auto;
    position: relative;
    width: 140px;
    z-index: 1;
    display: inline-block;
    padding: 0 13px 9px 13px;
}


.f1_container {
    -moz-perspective: 1000px;
    -webkit-perspective: 1000px;
    -o-perspective: 1000px;
}

.f1_card {

    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.5s linear 0s;


    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s linear 0s;

    -o-transform-style: preserve-3d;
    -o-transition: all 0.5s linear 0s;

    transform-style: preserve-3d;
    transition: all 0.5s linear 0s;

    height: 214px;
    width: 140px;
}

.f1_container:hover .f1_card, .f1_container.hover_effect #f1_card {
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}

.f1_container:hover .face.back {
    visibility: visible\9;
    height: 214px\9;
    width: 155px\9;
}

.face {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    height: 100%;
    position: absolute;
    width: 100%;

    background-color: blue;
}

.face.back {
    -moz-box-sizing: border-box;
    -moz-transform: rotateY(180deg);

    -webkit-box-sizing: border-box;
    -webkit-transform: rotateY(180deg);

    -o-box-sizing: border-box;
    -o-transform: rotateY(180deg);

    box-sizing: border-box;
    transform: rotateY(180deg);

    background-color: white;
    padding-top: 5px;
    color: #333;
    display: block;
    text-align: center;
    font-family: "MyriadProRegular", sans-serif;

    /* IE HACK */
    visibility: hidden\9;
}

.back hr {
    width: 50%;
    margin-bottom: 10px;
}

.back i {
    font-size: 25px;    
}

.back a {
    font-size: 20px;
    text-decoration: none;
}

.back a:visited {
    color: blue;
}

.book {
    cursor: pointer;
}

.book img {
    height: 214px;
    width: 140px;
}

只需一两次鼠标悬停，您就可以看到整个页面调整大小并且滚动条变小。任何想法如何解决这个错误？

格伦

CSS3 3D Transition在悬停时更改firefox页面大小

0 个答案: