28172 sujets

CSS et mise en forme, CSS3

[Résolu] Soucis perspective CSS3 avec ie

Bonjour, je rencontre un soucis avec mes css. J'explique : en gros l'idée est de faire un cube. Le code fonctionne parfaitement sous opéra, safari, firefox et chrome mais sous ie impossible d'avoir le rendu 3D. Quelqu'un aurait il une idée ?

Mon code source (simplifié)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oui il y en a un</title>
<style type="text/css">
/*reset values*/
*{
	margin: 0px;
	border: 0px;
	padding: 0px;
}
/*cadre cube*/
	#Diapo{
		overflow: hidden;
		text-overflow: hidden;
		display: block;
	}
/*copie externe*/

#Diapo {
	position:absolute;
	right:0px;
	top:10px;
	width:600px;
	height:500px;
	z-index:1;
}
/*cube*/
			.scene {
			  display: inline-block;
			  position: absolute;
			  right: 45%;
			  width: 300px;
			  height: 300px;
			  perspective: 1200px;
			  perspective-origin: 50% 150px;
			}
			.cube {
			  margin: auto;
			  top: 90px;
			  position: relative;
			  width: 300px;
			  height: 300px;
			  transform-style: preserve-3d;
			  transition: transform 2.0s;
			}
			.cube-face {
			  width: inherit;
			  height: inherit;
			  position: absolute;
			  background: rgba(255,255,255,0.1);
			  box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
			  opacity: 1;
			  border: 2px solid green;
			}
			/*faces*/
			.cube-face-front {
			  transform: rotateY(0deg) translate3d(0, 0, 150px);
			}  
			.cube-face-back {
			  transform: rotateY(180deg) translate3d(0, 0, 150px);
			} 
			.cube-face-left {
			  transform: rotateY(-90deg) translate3d(0, 0, 150px);
			} 
			.cube-face-right {
			  transform: rotateY(90deg) translate3d(0, 0, 150px);
			} 
			.cube-face-top {
			  transform: rotateX(90deg) translate3d(0, 0, 150px);
			} 
			.cube-face-bottom {
			  transform: rotateX(-90deg) translate3d(0, 0, 150px);
			}  

			#radio-back:checked ~ .scene .cube {
			  transform: rotateY(180deg); 
			} 
			#radio-left:checked ~ .scene .cube {
			  transform: rotateY(90deg); 
			  -ms-transform: rotateY(90deg); 
			} 
			#radio-right:checked ~ .scene .cube {
			  transform: rotateY(-90deg); 
			}
			#radio-top:checked ~ .scene .cube {
			  transform: rotateX(-90deg); 
			}  
			#radio-bottom:checked ~ .scene .cube {
			  transform: rotateX(90deg); 
			}
			.image1{
				position: relative;
				max-height: 250px;
				max-width: 250px;
				margin-top: 25px;
				margin-left: 25px;
				width: 100%;
				height: auto;
				opacity: 1;
			}

</style>
</head>

<body>
  <div id="Accueil" class="GeneAccueil">

	<div class="main">
		<!--cube-->
	  <div class="droite">
		<div class="scene" id="Diapo">
		  <div class="cube">
			  <div class="cube-face  cube-face-front"><img src="./ImaAccueil/Diapo1.png" alt="diapo 1" class="image1"></div>
			  <div class="cube-face  cube-face-back"><img src="./ImaAccueil/Diapo2.png" alt="diapo 2" class="image1"></div>
			  <div class="cube-face  cube-face-left"><Img src="./ImaAccueil/Diapo6.png" alt="diapo 6" class="image1"></div>
			  <div class="cube-face  cube-face-right"><Img src="./Ima/Logo.gif" alt="logo" style="height: 200px; margin-top: 50px; margin-left: 50px;"></div>
			  <div class="cube-face  cube-face-top"><img src="./ImaAccueil/Diapo3.png" alt="diapo 3" class="image1"></div>
			  <div class="cube-face  cube-face-bottom"><img src="./ImaAccueil/Diapo4.png" alt="diapo 4" class="image1"></div>
		   </div>
		</div>
	  </div>
	</div>    
  </div>
</body>
</html>
Le problème semble venir des propriétés perspective et perspective origin qui fonctionnent si placées dans .cube mais donne du coup des déformations pas très esthétiques (le code d'origine est en fait un cube animé).
Je classe donc le sujet comme résolu. Merci pour votre aide
Modifié par DeadmanIII (06 Jul 2017 - 14:50)
Sujet clos
Aller à