使用css3動畫的Spinning Div

我只需要一些幫助來調用我的代碼。我創建了一個旋轉div的css動畫。它使用中心軸以h-300像素旋轉3個大小爲w-400的div。但是，當我調整div的旋轉軸不居中，你可以在JSFiddle中看到。我的代碼如下。使用css3動畫的Spinning Div

JSFiddle for spinning div

我的CSS

.hover-img { 
      position: relative; 
      width: 600px; 
      height: 200px; 
      -webkit-transition: all 1s ease-in-out; 
      -moz-transition: all 1s ease-in-out; 
      -ms-transition: all 1s ease-in-out; 
      -o-transition: all 1s ease-in-out; 
      transition: all 1s ease-in-out; 
      background:url(http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif); 
      -webkit-transform:rotateY(180deg); 
      -webkit-transform-style: preserve-3d; 
       line-height:600px; 
      text-align:center; 
      font-size:0; 
      margin: 0 auto; 
} 
.hover-img:hover{ 
      -webkit-transform:rotateY(0deg); 
      font-size:14px; 
      color:white; 
}

HTML

<div class="row row2"> 
    <div class="column"><div class="hover-img"><p></p><img src="bottomleft.png" width="600" height="400" /> </div></div> 
    <div class="column"><div class="hover-img"><p></p><img src="bottomright.png" width="600" height="400" /></div></div> 
</div>

來源

2014-07-21 DanielNolan

如果我理解正確，請添加'margin：0 auto;'。 –

是Mr_Green是正確的。在'.hover-img' –

@Prashant中添加'margin：0 auto'請看看我的現場演示，因爲這不是問題，看看5個div，頂部3旋轉很好，但底部的兩個旋轉：）http://www.mildenhire.com/bigsmile/graphic.html – DanielNolan

請改變你的CSS hover-img類

.hover-img { 
position: relative; 
height: 300px; 
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-ms-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
background: url(bbclike/topright.png); 
-webkit-transform: rotateY(180deg); 
-webkit-transform-style: preserve-3d; 
line-height: 200px; 
text-align: center; 
font-size: 0; 
margin: 0 auto; 
}

刪除空白段落。從子類別class="hover-img"

來源

2014-07-21 12:47:45

使用css3動畫的Spinning Div

回答

相關問題