使用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

回答

相关问题