css - 悬停第一行的最后一项，第二行的前两项移动

Question

我刚刚使用 bootstrap 和 css 2d 做了一个布局，

please follow [this link to see]

( http://codepen.io/geesonC/pen/xGYJrQ )

问题是当我将鼠标悬停在第一行的最后一项时，第二行的前两项将移动到第三行。

我就是解决不了，请指教。

CSS代码

<style>
.margintop-300{
    margin-top:-300px;
}

.rotate-imgs{
    padding:24px;
    margin-top:20px;
    margin-bottom:60px;
    text-align:center;
}

.rotate-imgs:hover >.rotate-img{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.rotate-imgs:hover >.rotate-img-bg1{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border:0;
}

.rotate-imgs:hover >.rotate-img-bg2{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    border:0;
}

.rotate-img{
    padding:0;
    text-align:center;
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    transform: rotate(-1deg);

    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;

    z-index:1012;
}

.rotate-img-bg1{
    padding:0;  
    text-align:center;
    border:1px solid #dddddd;
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -o-transform: rotate(6deg);
    transform: rotate(6deg);

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    z-index:1011;
}

.rotate-img-bg2{
    padding:0;  
    text-align:center;
    border:1px solid #dddddd;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    z-index:1010;
}

HTML代码

<div class="container">
<div class="row">
     <div class="col-md-4 col-sm-6">
         <div class="rotate-imgs">
            <div class="rotate-img-bg1"><img src=""></div>
            <div class="rotate-img-bg2 margintop-300"><img src=""></div>
            <div class="rotate-img margintop-300"><img src=""></div>
         </div>
     </div>
     ...
     <div class="col-md-4 col-sm-6">
         <div class="rotate-imgs">
            <div class="rotate-img-bg1"><img src=""></div>
            <div class="rotate-img-bg2 margintop-300"><img src=""></div>
            <div class="rotate-img margintop-300"><img src=""></div>
         </div>
     </div>
   </div>
  </div>

谢谢!

Answer 1

CSS 边框属性(如 .rotate-img-bg1 和 .rotate-img-bg2)从元素开始，这意味着它们会影响页面布局。一个快速的解决方案是不在这些元素上使用 border: none;，而是使用 border: 1px solid transparent;。

代码笔:http://codepen.io/maxlaumeister/pen/MwQBQQ