Carrousel 3D - Internet Explorer

24 décembre 2018 à 9:14:44

Bonjour,

En m'inspirant de certains tuto, j'ai mis en place le carroussel 3D ci-dessous. Il fonctionne parfaitement sous chrome mais ne marche pas sous IE. Je pense que c'est du à la propriété transform-style : preserve-3d qui n'est pas prise en compte par le navigateur.

Les images utilisées sont des images quelconques récupérées sur internet peu importe la taille, lien à adapter dans le html.

Quelqu'un aurait une solution pour palier cette incompatibilité?

Merci d'avance !

HTML :

<!DOCTYPE html>
<html>
	<head>
	
			<title> Carrousel 3D </title>
			<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<section class="carrousel">
		<div class="contenu">
			<div class="contenu_carrousel">
				<figure class="images"><img src="carrousel_img/image1.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image2.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image3.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image4.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image5.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image6.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image7.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image8.jpg"></figure>
				<figure class="images"><img src="carrousel_img/image9.jpg"></figure>
			</div>
		</div>	
	</section>
	</body>
</html>

CSS :

.carrousel
{
	margin:0 auto;
	padding-top: 50px;
	height: 700px;
	box-sizing:border-box;
}

.contenu
{
	margin: auto;
	width: 190px;
	perspective: 1000px;
	position: relative;
	padding-top: 80px;
}

.contenu_carrousel
{
	-webkit-animation: rotar 15s infinite linear;
	-webkit-position: absolute;
	width: 100%;
	float: right;
	transform-style: preserve-3d;
}

.contenu_carrousel:hover
{
	animation-play-state: paused;
	cursor:pointer;
	
}

.contenu_carrousel figure
{
	width: 100%;
	height: 120px;
	border: 1px solid rgb(77,68,77);
	overflow: hidden;
	position: absolute;
}

.contenu_carrousel figure:nth-child(1)
{
	transform: rotateY(0deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(2)
{
	transform: rotateY(40deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(3)
{
	transform: rotateY(80deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(4)
{
	transform: rotateY(120deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(5)
{
	transform: rotateY(160deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(6)
{
	transform: rotateY(200deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(7)
{
	transform: rotateY(240deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(8)
{
	transform: rotateY(280deg) translateZ(300px);
}
.contenu_carrousel figure:nth-child(9)
{
	transform: rotateY(320deg) translateZ(300px);
}

.images
{
	position: absolute;
	box-shadow: 0px 0px 20px 0px #000;
	border-radius: 2px;
}

.contenu_carrousel img
{
	image-rendering: auto;
	transition: all 300ms;
	width: 100%;
	height: 100%;
}

.contenu_carrousel img:hover
{
	transform: scale(1.2);
	transition: all 300ms;
}

@keyframes rotar
{
	from
	{
		transform: rotateY(0deg);
	}
	
	to
	{
		transform:rotateY(360deg);
	}
}

Mr_Craw

29 décembre 2018 à 10:55:12

Mr_Craw

2 janvier 2019 à 9:04:45

Mr_Craw

4 janvier 2019 à 9:04:28

Personne n'a de réponses à donner ?!

Genroa

4 janvier 2019 à 10:47:46

Je dirais que la meilleure réponse est d'oublier ce navigateur. Il n'existe pas de polyfill pour des propriétés CSS, surtout pas celles-ci. Vouloir faire des choses modernes sur IE... C'est un peu comme vouloir viser une cible à 100 mètres avec un caillou lancé à la main.

Tu vas probablement devoir revoir tes exigences à la baisse:

oublier sur IE
ou faire quelque chose de plus simple mais qui fonctionne partout
ou avoir l'un sur les navigateurs récents et un remplacement pour IE (via les "commentaires IE")

Je dirais que le choix sain est le premier. Ce navigateur n'est plus supporté par Microsoft et les entreprises ne devraient plus l'utiliser non plus. Sa part d'utilisateurs est ridiculeusement faible.

Mais si tu n'as pas le choix (contrainte d'entreprise par exemple), tu vas probablement devoir oublier la 3D CSS sur IE.

Edit: caniuse confirme que IE11 n'a qu'un support partiel des propriétés CSS 3D et ne gère pas la propriété preserve-3d: https://caniuse.com/#feat=transforms3d

-
Edité par Genroa 4 janvier 2019 à 10:49:48

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

Mr_Craw

4 janvier 2019 à 14:14:28

Bonjour,

Merci de ta réponse je commencais à désespérer ahah

Oui j'ai belle et bien une contrainte entreprise, qui me force à utiliser IE, du coup je me suis vite rendu compte que preserve-3d n'était pas supporté.

Ce que j'aimerais donc savoir c'est est-ce que un autre langage tel que le JS pourrait permettre ce rendu 3D ou seul le CSS en est capable?

Cordialement,

Douma Tomi

Genroa

4 janvier 2019 à 14:18:03

Théoriquement le JS permettrait ça, mais à moins de faire quelque chose sur mesure à la main il faudrait utiliser une librairie 3D...et c'est sortir l'artillerie lourde à ce stade. Je ne peux pas non plus garantir que ça tournera sur IE11, ni des performances (WebGL sur IE11, mouais mouais).

CSS pour des transformations simples d'éléments est le seul, à moins de redévelopper en JS un genre de polyfill qui permette des déformations. Mais c'est beaucoup de temps pour pas grand chose.

J'ai bien trouvé un codepen qui tente de contourner le problème, mais rien d'autre: https://codepen.io/jonathan/pen/xiJLn

Edit: Ah, si, ce tuto: https://iamvdo.me/blog/les-transformations-3d-css-avec-ie10

-
Edité par Genroa 4 janvier 2019 à 14:23:36

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

Mr_Craw

4 janvier 2019 à 14:36:19

Merci pour ta réponse, je vais jeter un coup d'oeil à tes liens