How To Implement 2D Perspective Within a 3D Space (CSS & jQuery)


Tags: javascript,css3,animation,math

Problem :

I've been looking around for a solution to a problem which I've been unable to solve after much research. It's rather hard to explain so I've provided what I've managed to achieve so far as well as a concept of what I'm trying to achieve.

What I'm trying to achieve:

enter image description here

What I've managed to produce so far:

JSFiddle

The problem:

I'm trying to achieve a scrolling carousel menu. The window has 3 images (the one above is the second image). The window scrolls on it's x-axis. While it's scrolling the boxes should animate around a 360 degree ellipse. Here is the code for that functionality:

// 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;
};

The boxes should reduce in scale when they are in the distance and increase when they come to the front.

I only need to support IE 10+ for this client. I've been using CSS3 animations and tried the Canvas, all to no avail. Any help or pointers would be greatly appreciated.



Solution :

To get them all to face to the front you can rotate, then translate then rotate back again eg

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

In the rotateMenu function use something like

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'); 
};

    CSS Howto..

    How to finish my modal ajax code to work correctly?

    How to expand and collapse three div's side by side?

    How to create a specific X*X size table? (Battleship game) (HTML, CSS, JS)

    How to scroll to particular element using CSS/JS

    How to call an HTML css style in a computed text field

    How to perform media queries if either statements are correct?

    How to make CSS width to fill parent?

    How to change CSS when it's ng-disabled?

    How to disable Cufon on certain elements?

    How to set cursor off screen?

    How to apply an image to a CSS ordered list in WordPress?

    How can I make this Asp.net button have the same CSS as this

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    CSS HTML - How to add more outer colour on the drop down menus and more than one word per drop down

    how to stop jquery change css of all the divs onhover of a single div

    How to style a selected radio button AND include space as clickable?

    How to hide a div with jquery or alternative?

    how to select :after element using jquery

    jqueryUI custom button not showing up

    How to create shaded divs like this with CSS

    How to create a medal in css [closed]

    How to highlight main label for checkbox input using css or jQuery

    how to create sprite with css [closed]

    How to make a caret in a link change color when the LINK is hovered over?

    How to force inline-blocked divs to same height

    How to show mixed html and css with angularJS

    How to refactor CSS based on HTML class

    CSS sprite - showing part of another image when zooming

    How to set display none on tag using css?

    How to align text next to a “div” in HTML/CSS?