Bonjour à tous !

Voilà mon problème : pour la présentation de mon carrousel, je ne comprends pas pourquoi le z-index ne veut pas fonctionner...

Malgré le fait d'avoir mis la plus haute valeur au z-index du cadre central, il paraît être "derrière" les deux qui l'entourent... Non, ce n'est pas parce que le bloc central est transparent, car regardez la couleur de la bordure normalement noire quand elle passe derrière le cadre jaune...

Je vous mets juste le code css de ces blocs pour ne pas vous embrouiller :

.l3, .r1{
	width:15%;
	height:100%;
	z-index: 1;
	opacity: 0.5;
}

.l2, .r2{
	width:7%;
	height:100%;
	z-index: 2;
	opacity: 0.5;
}

.l1, .r3{
	width:5%;
	height:100%;
	z-index: 3;
	opacity: 0.5;
}


.carousel-central{
	width: 35%;
	margin-left: auto;
	margin-right: auto;
	height: 99%;
	border:1px solid black;
	background-color: green;
	opacity: 1;
	z-index: 200;

A votre avis, est-ce parce que la perspective du container principal qui regroupe tous les cadres est de 150px ? Est-ce donc la 3D qui rend un peu inutile les valeurs de mes z-index ?

Merci beaucoup d'avance pour vos réponses !