我正在创建一个“书架”,其中包含使用 CSS3 变换来旋转 onHover 的书籍。
我的问题是,经过几次悬停后,页面会调整大小并变得更长。我只在 Firefox 12.0 中遇到这个问题。
示例:http: //jsfiddle.net/49KQk/
<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;
}
您可以在悬停一两次后看到整个页面调整大小并且滚动条变小。任何想法如何解决这个错误?
格伦