Question

我的目标是使用jQuery为div生成类似于apple coverflow的效果。有一个名为CoffeeFlow的非常棒的克隆，但它与我正在寻找的略有不同。

我正在寻找的更像是看着装满衣服的衣柜。所有的div都变成了近90度，所以你几乎看不到它们。当你将鼠标移到它们上方时，它们会旋转并伸直，这样你就可以看到它们，当你解开它们时，它们会滑回原位。

我正在使用the jQuery plugin transit来帮助实现这一目标。我有一个几乎达到我想要的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 with solution

Answer 1

我对css转换并不是很熟悉，但是使用开发工具我在jquery transit执行mouseout之后检查了css并用它取代了你的转换和透视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/

使用jQuery的Coverflow效果

1 个答案: