使用 css3 动画旋转 Div答案

【问题标题】：Spinning Div using css3 animation使用 css3 动画旋转 Div
【发布时间】：2014-07-21 21:20:44
【问题描述】：

我只是需要一些帮助来调整我的代码。我创建了一个旋转 div 的 CSS 动画。它使用中心轴旋转 3 个 div，大小为 w-400 x h-300 像素。但是，当我调整 div 的大小时，旋转轴没有居中，正如您在 JSFiddle 中看到的那样。我的代码如下。

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>

【问题讨论】：

如果我理解正确，请添加margin: 0 auto;。
是的 Mr_Green 是正确的。在.hover-img 中添加margin : 0 auto
@Prashant 请看我的现场演示，因为这不是问题，看 5 个 div，前 3 个旋转正常，但底部两个在旋转时移动:) mildenhire.com/bigsmile/graphic.html
需要把.hover-img的宽度改成max-width，给子img max-width: 100%。

标签： css animation css-animations

【解决方案1】：

请更改 hover-img 类的 CSS

.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"的子类

【讨论】：