html - float 内联div上的CSS动画

Question

我长期以来一直使用这个网站来帮助我解决我的 CSS 和 HTML，但现在我似乎遇到了一个我找不到答案的错误:

我在页面居中的父 div 中加载了一些左浮动的 div。我已经使用阴影和移动边距为其中一些 div 制作了 3D 悬停效果。然后我用 CSS 过渡动画悬停。

我的问题是，在动画期间，div float 到悬停的左侧有点摆动了几个像素。在动画的结束状态下，它在过渡期间处于正确的位置。 .

我认为这是因为 div 是 float 的和内联的，无法真正更改。但是左边的边距减少的速度与右边的边距相同，那么为什么周围的 div 会摇晃呢？ :(

我制作了一个 Fiddle 来显示这里的问题 http://jsfiddle.net/9jqbX/

<div class="wrapper">

<div class="cube4 threedeehover"></div>
<div class="cube4 threedeehover"></div>
<div class="cube4 threedeehover"></div>
<div class="cube4 threedeehover"></div>

.wrapper {                          position: relative;
                                width: 960px;
                                margin-right: auto;
                                margin-left: auto;
                                padding-left: 10px;
                                padding-right: 10px;
                                padding-bottom: 20px; }

.cube4 {
                                float: left;
                                min-height: 1px;
                                position: relative;
                                margin-top: 20px;
                                margin-left: 10px;
                                margin-right: 10px;
                                width: 180px;
                                height: 180px;
                                overflow: hidden; padding: 20px;
                                background:#347ec9; }


.threedeehover {                    -webkit-transition: all 0.3s ease;
                                -moz-transition: all 0.3s ease;
                                -ms-transition: all 0.3s ease;
                                -o-transition: all 0.3s ease;
                                transition: all 0.3s ease; }

.threedeehover:hover {              box-shadow: 
                                1px 1px 0px 0px #fff,
                                2px 2px 0px 0px #eee,
                                3px 3px 0px 0px #fff,
                                4px 4px 0px 0px #eee,
                                5px 5px 0px 0px #fff,
                                6px 6px 0px 0px #eee,
                                7px 7px 0px 0px #fff,
                                8px 8px 0px 0px #eee,
                                9px 9px 0px 0px #adadad,   /*3D bottom border colour*/
                                5px 5px 20px 0px rgba(0,0,0,0.50);}

.cube4.threedeehover:hover {        margin-top: 11px; 
                                margin-left: 0px; 
                                margin-right:20px; }

我在 OSX 10.9.4 中使用 Safari 7.05，任何帮助将不胜感激:)

Answer 1

我认为这是 Safari 的问题，是的。

尝试使用translate代替margin。

fiddle :http://jsfiddle.net/nikoloza/9jqbX/1/