如何在3D空間中實現2D透視（CSS和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'); 
};