## 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:

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