Le calcul du rayon (EN) d'une face d'un carrousel n'est pas aussi compliqué qu'on pourrait l'imaginer. On prend la moitié de la largeur de chaque face (ici 300px). Ce qui nous donne 150 pixels. L'angle d'une face dans cet exemple, quant à lui, est de 60 degrés. On prend en compte la moitié de l'angle, autrement dit 30 degrés. Ensuite, on applique une formule mathématique (équation d'une tangente). On va diviser la motié d'une face (150 pixels) par la tangente de la moitié de l'angle (30 degrés). Le résultat obtenu est de 259.807621135 pixels.
<div class="contenu-carrousel">
<div class="carrousel">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class=controle>
<button onclick="carrousel('-')">❮</button>
<button onclick="carrousel('')">❯</button>
</div>
.controle{
display:grid;
grid:auto/repeat(2,1fr);
place-items:center
}
button{
font-size: 2rem;
border: none;
cursor: pointer;
background: #eee
}
.contenu-carrousel {
margin: 5rem auto;
width: 300px;
height: 200px;
position: relative;
perspective: 1000px
}
.carrousel {
height: 100%;
width: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carrousel div {
backface-visibility: hidden;
box-shadow: 0 10px 10px rgba(0,0,0,.6);
position: absolute;
width: 300px;
height: 200px;
outline: 1px solid transparent
}
.carrousel div:nth-child(1) {
transform: rotateY(0) translateZ(270px);
background:url(image.jpg) no-repeat center center/cover
}
.carrousel div:nth-child(2) {
transform: rotateY(60deg) translateZ(270px);
background:url(image.jpg) no-repeat center center/cover
}
.carrousel div:nth-child(3) {
transform: rotateY(120deg) translateZ(270px);
background:url(image.jpg) no-repeat center center/cover
}
.carrousel div:nth-child(4) {
transform: rotateY(180deg) translateZ(270px);
background:url(image.jpg) no-repeat center center/cover
}
.carrousel div:nth-child(5) {
transform: rotateY(240deg) translateZ(270px);
background:url(image.jpg) no-repeat center center/cover
}
.carrousel div:nth-child(6) {
transform: rotateY(300deg) translateZ(270px);
background:url(image.jpg) no-repeat center center/cover
}
var angle = 0;
function carrousel(sign){
carou=document.querySelector(".carrousel");
if(!sign){angle = angle + 60
else{
angle = angle - 60
}
carou.setAttribute("style","transform:rotateY("+ angle +"deg);")}