logo标签列表

CSS 3假3D立方体在两个盒子之间旋转

htmlcsscss-animations
6

我使用css实现了翻转旋转：

.flip-card {
    position: relative;
    z-index: 1;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

.flip-card-content {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.5s ease-in-out;
    -o-transform-style: preserve-3d;
    -o-transition: all 0.5s ease-in-out;
    transform-style: preserve-3d;
    transition: all 0.5s ease-in-out;
}

.flip-card.flip-x.flipped .flip-card-content,
.flip-card.flip-x .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.flip-card.flip-x-inverse.flipped .flip-card-content,
.flip-card.flip-x-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
}

.flip-card.flip-y.flipped .flip-card-content,
.flip-card.flip-y .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-card.flip-y-inverse.flipped .flip-card-content,
.flip-card.flip-y-inverse .flip-card-side.flip-card-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-card-side {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

您可以在此处查看示例：http://jsfiddle.net/jckMg/ 但是我现在看到了这个惊人的效果：http://tympanus.net/Development/CreativeLinkEffects/#cl-effect-19 我想要复制相同的转换效果，但我不明白它是如何工作的，或者更好的说，我明白它是如何利用伪选择器来“注入数据”，但我不明白如何重构我的想法，在两个div之间切换，而不是这样做。 怎么做呢？
更新：
最后的实验实现是：http://jsfiddle.net/w7y4N/ 只有在Firefox中完美运行（在Chrome和Safari中存在错误）。您能修复它以实现跨浏览器吗？
3
为什么不下载源代码自己看看呢？ - Zach Saucier
我尝试过，实际上当我写的时候，我发现它使用了伪选择器和"data"属性，但是我放弃了，因为我不知道如何将那种方法改成我的方法 :( - daveoncode
您想要在点击还是悬停时进行转换？ - Amarnath Balasubramanian
点击事件并不是问题，问题在于如何实现一个能在每个浏览器上都正常工作的良好动画！ - daveoncode
这在我的Safari浏览器上运行良好！ - Advocation
在Safari中它可以工作，但不是很正常。尝试打开Firefox和Safari并将它们放在小窗口旁边...你会注意到在Safari中魔方的面被拉伸了（比预期的要大），而字体也有些模糊。 - daveoncode
3个回答
3

更新：这是被采纳的答案。我的第一个答案使用了错误类型的动画，并且由于我使用了rotate-3d属性，在IE中它无法正常工作。供参考，我的第一个答案保留在被采纳的答案下方。

由于IE不支持preserve-3d，我修改了代码以分别旋转每个面，但对于只有两个div的情况来说，这并不是什么大问题，而且代码非常简洁。在Windows中测试了Chrome 31、FF26、O18和IE10。在IE9中，它只会翻转内容而没有进行很酷的过渡效果，但仍然有效。为了更好地支持旧版浏览器，我可能会使用modernizr类来切换侧边的可见性。

演示

HTML

<div class="flip-card-content">
  <div class="flip-card-side-a" style="background:red">
    FRONT 
  </div>
  <div class="flip-card-side-b" style="background:green">
    BACK
  </div>
</div>

<button id="button">Flip</button>

CSS（使用SCSS，为简洁起见省略了供应商前缀）

.flip-card-content {
    position: relative;
    margin: 100px;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.flip-card-side-a,
.flip-card-side-b {
    width: 100%;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
    transition: all .5s ease-in-out;
}

.flip-card-side-a {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1; // fixes buggy behavior in FF and Opera
}
.flip-card-side-b {
  transform: rotateY(90deg) translateZ(100px);
}

.flip .flip-card-side-a {
  transform: rotateY(-90deg) translateZ(100px);
}
.flip .flip-card-side-b {
  transform: rotateY(0deg) translateZ(100px);
  z-index: 1;
}

默认情况下，CSS会使对象围绕其中心旋转，并通过设置 transform-origin 属性来改变旋转原点的值（在本例中为顶部和中心）。由于我们更改了旋转变换的原点，将div旋转180度会将其放在红色div上方，因此我们必须将其旋转270度才能水平放置在平面上且不可见。通过在单击或其他操作时将旋转设置回0度，我们可以获得很酷的翻转效果。
DEMO： 点击此处
谢谢Teo，但那不是我想要实现的动画（而且你的版本至少在Firefox中有问题）... 我最后的实现在这里：http://jsfiddle.net/w7y4N/。我想要的是一个立方体效果，而不是“翻页”：P - daveoncode
1
是的，我刚刚弄明白了。我的错。我制作了另一个带有你想要的动画演示：http://codepen.io/teodragovic/pen/bKlcA 它在除IE之外的所有浏览器中都可以运行。 - Teo Dragovic
太酷了！接近完美，但在Opera上不起作用，在ie10上，当正面被翻转时，背面不可见...也许这个问题可以解决...还有一个问题：为了使动画准备就绪，我该如何创建回退？非常感谢 :) - daveoncode
我做了一些研究。由于IE不支持preserve-3d，所以我修改了代码，将每个面单独旋转，但对于只有两个面来说，这并不是什么大问题，而且代码非常干净。它在包括IE10在内的所有最新浏览器中都可以工作。在IE9中，它只是翻转内容而没有酷炫的过渡效果，但仍然可以工作。为了更好地支持旧版浏览器，我可能会使用modernizr类来切换面的可见性。 - Teo Dragovic
胜者是……Teo Dragovic！干得好，非常感谢！！请最后一个请求：更新您的答案，包括最终实现/注释，以便每个人都能看到，提前致谢！;) - daveoncode
1
这是我在codepen上制作的一个更简单的演示。基本上我们将链接看起来像一个框，然后使伪元素与其大小相同，并在X轴上旋转它直到它消失（270度）。然后当悬停时，我们将旋转过渡到0度。
这与我想要实现的目标无关 :) - daveoncode
0
经过数小时的尝试，我想出了这个实现方法：
    .cube .cube-content {
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        -o-perspective: 1000px;
        perspective: 1000px;
        width: 200px;
        height: 200px;
        position: relative;
    }

    .cube .cube-content .front {
        position: absolute;
        width: 200px;
        height: 200px;
        background: red;
        z-index: 2;

        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;

        -moz-transition: all 0.5s ease-in-out;
        -moz-transform-style: preserve-3d;
        -moz-transform-origin: 50% 50% -100px;

        -o-transition: -o-transform 0.5s;
        -o-transform-style: preserve-3d;
        -o-transform-origin: 50% 50% -100px;

        transition: all 0.5s ease-in-out;
        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cube .cube-content .back {
        position: absolute;
        width: 200px;
        height: 200px;
        background: green;
        z-index: 1;

        -webkit-transition: all 0.5s ease-in-out;
        -webkit-transform-style: preserve-3d;
        -webkit-transform-origin: 50% 50% -100px;
        -webkit-transform: rotateY(90deg);

        -moz-transition: all 0.5s ease-in-out;
        -moz-transform-style: preserve-3d;
        -moz-transform-origin: 50% 50% -100px;
        -moz-transform: rotateY(90deg);

        -o-transition: all 0.5s ease-in-out;
        -o-transform-style: preserve-3d;
        -o-transform-origin: 50% 50% -100px;
        -o-transform: rotateY(90deg);

        transition: all 0.5s ease-in-out;

        transform-style: preserve-3d;
        transform-origin: 50% 50% -100px;
        transform: rotateY(90deg);

        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cube-flipped .cube-content .front {
        -webkit-transform: rotateY(-90deg);
        -moz-transform: rotateY(-90deg);
        -o-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    .cube-flipped .cube-content .back {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

演示：http://jsfiddle.net/w7y4N/ 它在Firefox上运行得非常完美，但在Chrome和Safari上有些问题（未在Internet Explorer中进行测试）。
让它能够跨浏览器工作或至少优雅地降级将是超级酷的:P。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接