Question

我试图复制可以在本网站http://www.toolofna.com/#!/work上看到的效果。当水平向左/向右滚动时，存在不同图像的div在x轴周围翻转，然后稳定到其原始位置。我知道这可以使用CSS3实现，但我认为还有一些jQuery代码也在这个效果背后运行。

我尝试在互联网上搜索这个并遇到了webkit-transform-origin但我想这个效果更复杂一些。期待解决方案。

Answer 1

显然这个FIDDLE不会考虑卡片的初始状态（如果你愿意，你可以自己动手），它已经设法实现 onScroll 效果你在寻找。

var visibleXStart = $('#wrapper').offset().left;
var visibleXEnd = $('#wrapper').offset().left + $('#wrapper').width();

$('#wrapper').scroll(function () {
    $('.card').each(function () {
        var thisCard = $(this);
        if (thisCard.offset().left < visibleXEnd - 100) thisCard.css({
            '-webkit-transform': 'rotatey(0deg)'
        });
        else thisCard.css({
            '-webkit-transform': 'rotatey(-180deg)'
        });
    });
});

我扩展了@ aamir-afridi提供的小提琴
您可能还想对代码进行一些清理以适合您的网页。

希望它有所帮助。

div水平向左/向右滚动时翻转

1 个答案: