css - 3d 对 Angular 线翻转不起作用

Question

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

框 1 - 悬停时在 Y 轴上翻转 <- 这完美无缺
框 2 - 悬停时在 X 轴上翻转 <- 这完美地工作
框 3 - 悬停时的淡入淡出效果 <- 这完美无瑕
方框 4 - 在悬停时沿对 Angular 线翻转 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 开始时，它看起来很完美，前面是正确的方向，后面是隐藏的，这是应该的。当你悬停在它上面时，动画从右开始，它在对 Angular 轴上翻转(从左上角到右下角)，但是当动画结束时，前面(应该在后面可见但相反)垂直于背面!

我已经用所有可以想象的方式调整了 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- 样式，但在我的实际 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/)，但我认为缩放看起来更好。