I am currently working on creating a 3D carousel using CSS and javascript. To view what I have accomplished so far, you can visit this page:
Upon arriving at the page, please click the "initialize" button to transform the carousel into 3D space. By default, it will start with 5 panels, but this number can be adjusted using the controls.
The issue I am facing involves the size of the panels when increasing their number. As more panels are added, they seem to get larger due to the increased distance from the origin point. What I aim to achieve is for the front panel to always maintain a consistent size, regardless of the total number of panels present.
Instead of pushing every panel out by a certain distance, I want the front panel to remain static in 3D space, while the other panels adjust around it (I hope that explanation makes sense).
I have implemented this using angular, but it could easily be done with plain javascript as well. Below is 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)';
};
};
Each time the "initialize" button is clicked, the $scope.initializeCarousel function is triggered, based on the selected number of panels.
I suspect that the issue may lie within the CSS styling rather than the javascript logic, but as a newcomer to CSS animations, I'm not entirely sure. Any assistance or advice on solving this matter would be greatly appreciated. Thank you!