1

我的目标是使用 jQuery 为 div 制作类似于苹果覆盖流的效果。有一个非常棒的克隆，叫做CoffeeFlow，但它与我正在寻找的略有不同。

我正在寻找的更像是在看一个装满衣服的壁橱。所有的 div 都转了近 90 度，所以你几乎看不到它们。当您将鼠标悬停在它们上方时，它们会旋转并拉直，以便您可以看到它们，而当您悬停时，它们会滑回原位。

我正在使用jQuery 插件中转来帮助实现这一目标。我有一个几乎可以实现我想要的 jsFiddle，但似乎有些不对劲。它似乎是伸展进出而不是旋转。可能还有其他问题，但这是我现在最明显的。

jsFiddle

    $(document).ready(function () {
        $('.boxxe').hover(

        function () {
            $(this).stop();
            $(this).transition({
                rotateY: '0deg',
                zIndex: '2',
                background: '#afa',
                scale: 1.1
            }, 400);
        },

        function () {
            $(this).stop();
            $(this).transition({
                rotateY: '60deg',
                zIndex: '-1',
                background: '#FFF',
                scale: 1
            }, 400);
        });
    });

编辑：看起来我最大的问题之一是我在我的 css 中的观点不起作用。如果我将透视图应用于我的转换函数（正如您在演示中看到的那样），它会起作用，但不是在我的 css 文件中。

jsFiddle解决方案

4

1 回答 1

2

我对css转换不是很熟悉，但是使用开发工具我在jquery transit执行mouseout后检查了css并用它替换了你的transform和perspective css，它看起来像它的工作原理：

transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);
-webkit-transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);

http://jsfiddle.net/bbird/Whqv7/

于 2013-07-09T19:49:26.080 回答