CSS Dynamic 3D carousel, z-axis positioning

Question

I'm creating a 3D carousel using CSS and javascript. For testing and developing, I've uploaded what I have so far on this page: http://dev.rushfivedesigns.com/

When you get to the page, please hit the "initialize" button to have it transformed into 3D space. By default, it will initialize with 5 panels, and this can be changed using the controls.

The problem I'd like to solve is this: When I increase the number of panels, the distance from the origin increases and so the panels increase in perceptible size (they get blown up). I'd like it if the front panel would always retain the same size, regardless of how many panels there are.

So rather than pushing every panel out by x distance, I want the front panel to stay at a static location in 3D space, and then everything else is pushed around behind it (hope that makes sense).

I've made this using angular, but this could easily be made using plain javascript as well. Here's the relevant code:

HTML

<div id="musicPlayer">
    <section class="container">
        <div id="carousel">
            <figure class="something" ng-repeat="item in items">item {{item.someKey}}</figure>
        </div>
    </section>
</div>

CSS

.container {
    width:300px;
    height:300px;
    position:relative;
    perspective: 1000px;
    margin-left: 400px;
    margin-top:100px;
}

#carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

#carousel figure {
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    border: 2px solid black;
    width: 276px;
    height: 276px;
}

Javascript

$scope.items = [];

for (var i = 0; i < 5; i++) {
    var filler = {
        someKey: i
    };
    $scope.items.push(filler);
};

$scope.initializeCarousel = function () {
    var carousel = document.getElementById('carousel');
    var numPanels = $scope.items.length;
    var theta = 360 / numPanels; // rotation between each panel in 3D space
    var radius = Math.round(150 / Math.tan(Math.PI / numPanels)); // how far in Z-axis the panels are pushed out

    //rotate panels by theta
    for (var i = 0; i < $scope.items.length; i++) {
        var panel = carousel.children[i];
        var angle = theta * i;
        panel.style.transform = 'rotateY(' + angle + 'deg) translateZ(' + radius + 'px)';
    };
};

Everytime the "initialize" button is pressed, the $scope.initializeCarousel function is called, using the # of panels chosen.

I have a feeling this may just be related to CSS coding, and not necessarily the javascript, but I'm really not sure. I'm completely new to CSS animating.

Any guidance on this would be great. Thanks SO!

Answer 1

My guess is you need to figure out the radius of the "sphere" and move all the panels in the z direction at least that distance forward. The better way to do it would be by moving the camera which is where you are positioned away from the object.