3

我有一个页面，上面有一堆盒子。有四种类型的盒子。我想要 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- 样式，但在我的实际 CSS 中，我有 -moz-、-o-、-ms- 以及常规的无前缀变体......

4

1 回答 1

1

嗯，嗯...我通过切换正面和背面的 CSS，同时保持这两个颜色的颜色，以及删除曾经是背面和现在正面的变换来让它工作。（变换是我想到的第一件事，因为在您的原始文件中，背面的变换只是被悬停变换撤消，按照通常的方式定向它（水平对齐），但是一旦我删除了颜色出于某种原因切换了。）

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

不过，不确定它是否适用于使用-webkit-（Safari 和 Chrome，我相信？）而不是-moz-.

随着关于你想要最终方向的澄清，我认为现在应该按照你想要的方式工作。我只是稍微改变了一下，添加了透明度，并在悬停变换中包含了缩放操作以配合旋转。

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

在 z 轴上额外旋转 90 度也可以（http://jsfiddle.net/6KLYs/7/），但我认为缩放看起来更好。

于 2012-07-27T14:33:07.707 回答