如何在3D空间中实现2D透视（CSS＆amp; jQuery）

Question

我一直在四处寻找解决问题的方法，经过大量研究后我无法解决这个问题。这很难解释，所以我提供了我迄今为止所取得的成就以及我想要实现的概念。

我想要实现的目标：

到目前为止我设法制作的内容：

JSFiddle

问题：

我试图实现滚动轮播菜单。窗口有3个图像（上面的图像是第二个图像）。窗口在其x轴上滚动。虽然它滚动框应该围绕360度椭圆动画。以下是该功能的代码：

// Return degrees relative to window scroll.
// Scroll left 0 = 0 degrees and max scroll left = 360 degrees
this.degrees = function(windowScrollX, windowWidth, maxScrollX) {
    var degrees = (windowScrollX / ((maxScrollX + windowWidth) / 360)) * 2;

    if(degrees > 360) {
        degrees = 360;
    }

    if(degrees < 0) {
        degrees = 0;
    }

    return degrees;
};

当盒子在远处时，盒子应该缩小，当它们到达前面时盒子会增加。

我只需要为此客户端支持IE 10+。我一直在使用CSS3动画并尝试使用Canvas，但都无济于事。任何帮助或指示将不胜感激。

Answer 1

要让它们全部面向前方，您可以旋转，然后平移然后再旋转，例如

.ring > .two {
    transform: rotateY(40deg) translateZ(380px) rotateY(-40deg);
}

在rotateMenu函数中使用类似

的内容

this.rotateMenu = function(degrees) {
    var d1 = degrees;
    var d2 = degrees+40;
    var d3 = degrees+80;
    var d4 = degrees+120;
    var d5 = degrees+160;
    var d6 = degrees+200;
    var d7 = degrees+240;
    var d8 = degrees+280;
    var d9 = degrees+320;

    $( '.ring > .one').css('transform', 'rotateY('+ d1 +'deg) translateZ(380px) rotateY(-'+ d1 +'deg'); 
    $( '.ring > .two').css('transform', 'rotateY('+ d2 +'deg) translateZ(380px) rotateY(-'+ d2 +'deg'); 
    $( '.ring > .three').css('transform', 'rotateY('+ d3 +'deg) translateZ(380px) rotateY(-'+ d3 +'deg'); 
    $( '.ring > .four').css('transform', 'rotateY('+ d4 +'deg) translateZ(380px) rotateY(-'+ d4 +'deg'); 
    $( '.ring > .five').css('transform', 'rotateY('+ d5 +'deg) translateZ(380px) rotateY(-'+ d5 +'deg'); 
    $( '.ring > .six').css('transform', 'rotateY('+ d6 +'deg) translateZ(380px) rotateY(-'+ d6 +'deg'); 
    $( '.ring > .seven').css('transform', 'rotateY('+ d7 +'deg) translateZ(380px) rotateY(-'+ d7 +'deg'); 
    $( '.ring > .eight').css('transform', 'rotateY('+ d8 +'deg) translateZ(380px) rotateY(-'+ d8 +'deg'); 
    $( '.ring > .nine').css('transform', 'rotateY('+ d9 +'deg) translateZ(380px) rotateY(-'+ d9 +'deg'); 
};