3d对角线翻转不起作用

Question

我有一个页面，上面有一堆盒子。有四种类型的盒子。我想要4种不同的css3过渡。

方框1-悬停时在Y轴上翻转

方框2-悬停时在X轴上翻转

方框3-悬停时的淡入淡出效果<-完美无瑕

方框4-悬停时在X和Y轴上对角线翻转<-此排序最初有效，然后不起作用

每个框都有相同的标记：

<div class="box box-4">
    <div class="inner-container">
        <div class="front"><img src="some_pic.jpg"></div>
        <div class="back">
            <div class="tools"><!-- some links and stuff --></div>
        </div>
    </div>
</div>

因此，当box-4启动时，它看起来很完美，前面是正确的向上方向，后面是隐藏的，就像它应该的那样。当你将鼠标悬停在它上面时，动画从右开始，它在对角轴上翻转(从左上角到右下角)，但是当动画结束时，前面(应该在后面可见，但反转)垂直于后面！

​

​

我已经以所有可以想象的方式调整了CSS的值，我已经看了一大堆的演示，有什么问题吗？！

CSS：

.box-4 { -webkit-perspective:1200px; }
.box-4 .inner-container { 
       width:100%; height:100%; position:relative; 
       -webkit-ransition:all 0.4s ease-in-out; 
       -webkit-transform-style:preserve-3d; 
}
.box-4 .back { 
    width:100%; height:100%; position:absolute; top:0; left:0; 
    background-color:rgba(0,0,0,.6); 
    -webkit-backface-visibility:hidden; 
    -webkit-transform-style:preserve-3d; 
 }
.box-4:hover .inner-container { -webkit-transform:rotate3d(45,45,0,180deg); }
.box-4 .back { -webkit-transform:rotate3d(45,45,0,-180deg); }

注意:为了简单起见，我在这里只显示了-webkit- style，但在我的实际CSS中，我使用了-moz-，-o-，-ms-以及常规的无前缀变体...

Answer 1

好吧，嗯..。我通过切换前面和后面的CSS，同时保持这两个地方的颜色，以及删除曾经的背面和现在的正面的变换，使其工作。(转换是我想出来的第一件事，因为在你的原稿中，背面的转换只是被悬停转换取消了，它的方向是正常的(水平对齐)，但一旦我删除了它，颜色就会因为某种原因而切换。)

http://jsfiddle.net/6KLYs/4/

不确定它是否能在使用-webkit-的浏览器中工作(我相信是Safari和Chrome？)而不是-moz-。

在澄清了你想要的最终方向之后，我相信现在应该按照你想要的方式工作了。我只是稍微往回改了一下，添加了透明度，并在悬停变换中加入了缩放操作，以配合旋转。

http://jsfiddle.net/6KLYs/6/

在z轴上再旋转90度也可以( http://jsfiddle.net/6KLYs/7/)，但我认为缩放效果更好。