/* style spécifique pour l'exemple de div */
 /* inspiré de : http://www.css3create.com/Rotation-d-un-menu-en-CSS3 */
 
 /* il y a 4 styles différents ici */
 #divSample{
	float:right;width:400px;
	padding:15px;
	border: 1px dotted red;
	border-radius:15px;
	box-shadow:5px 5px 12px black, 0 0 20px blue inset;
	background:#ffa;
	margin:10px;
	margin-right:0;
}
 /* style 1 : transition d'apparition */
 #divSample #div1{
	padding:15px;
	transition-property: opacity, height, line-height;
    transition-duration: 2s;
	transition-timing-function: ease-out;
	opacity: 0;
	height:0;
	line-height:0;
}
 #divSample:hover #div1{
	opacity: 1;
	height:300px;
	line-height:12px;
}

/* style 2 : simple agrandissement fixe */
#divSample #div2{
	transform-origin: 0 50%;
	transform: scaleY(1.25);
	transform: rotate(5deg);
}
/* style 3 : rotation comme une pochette */
	/*Etape 1 : Gérer les transformations*/
		/*Tout d’abord, positionnement du menu en haut, et positionnement des liens masqués à l’envers :*/
		#div3{
			height:250px;
			font-size:1.05em;
			background:#627878;
		}
		#div3 dl.fiche{
			position: relative;
			bottom: 0;
			width:340px;
			height:245px;
			padding:5px;
			left:26%;
			margin-left:-75px;
			color:#324040;
			text-align:center;
			z_background:linear-gradient(#04b3d2,#48dfff);
			background:#04b3d2;
			border-radius:4px;
			box-shadow:0px 0px 6px rgba(0,0,0,0.7);
			transform-origin: 50% 25px;
		}
		#div3 dl.fiche {
			transition-property: background;
			transition-duration: .7s;
			transition-timing-function: ease-out;
 
		}
		#div3 dl.fiche:hover {background:#f4e352;		}
		#div3 dt{
			position:absolute;
			top:0px;
			width:100%;
			height:40px;
			padding-top:5px;
		}
		#div3 dl.fiche dd{transform: rotate(180deg);}

		
		
		/*Puis au hover, on pivote la fiche de 180 degrés :*/
		#div3 dl.fiche:hover{transform: rotate(-180deg);		}
	/*Etape 2 : ajout des animations*/
		/*Ensuite, les animations permettent de faire pivoter la fiche avec un effet de balancier : le menu bascule deux fois avant de s’arrêter en bas.
		Tout d’abord la fiche descend (animation bounceIn)*/
		#div3 dl.fiche:hover{animation: bounceIn 0.7s ease-in-out ;}
		@keyframes bounceIn {
			from {transform:rotate(0deg);}
			75%{transform:rotate(-200deg);}
			90%{transform:rotate(-175deg);}
			to {transform:rotate(-180deg);}
		}
		
		/*Puis remonte (animation bounceOut) :*/
		#div3 dl.fiche{ animation: bounceOut 0.7s ease-in-out; }
		@keyframes bounceOut {
			from {transform:rotate(-360deg);}
			0% {transform:rotate(-180deg);}
			10%{transform:rotate(-160deg);}
			to {transform:rotate(-360deg);}
		}
		/*Enfin, une div id="masque" et une div id="ombre" sont nécessaires pour créer l’effet de superposition des éléments et ainsi permettre au menu d’être caché. À vous d’adapter ensuite ce code pour vos designs. Regardez le code source dans la partie "head" pour le code complet.
		Note : n’oubliez pas non plus l’ajout de tous les préfixes propriétaires pour un fonctionnement dans la majorité des navigateurs du marché.
		*/
		#div3 .masque{
			position:relative;
			z-index:50;
			width:400px;
			height:230px;
			bottom:229px;left:0;
			background:#627878;
			background:linear-gradient(#324040,#627878);
			border-radius:10px;
		}

		#div3 .ombre{
			position:relative;
			z-index:40;
			width:380px;
			height:6px;
			bottom:560px;
			margin-top:0px;
			left:10px;
			box-shadow:0px 100px 3px black;
			border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
		}

/* Style 4 : déplacement vers le haut */
	/*Etape 1 : Gérer les transformations*/
	
	/*Tout d’abord, positionnement du menu en haut, et positionnement des liens masqués à l’envers :*/
	#div4{height:300px; font-size:1.05em; background:#627878;border-radius:0 0 10px 10px; }
	#div4 dl.fiche{/* positionnement de la fiche */
		position: relative;
		bottom: 0; left:26%;
		width:340px; height:255px;
		padding:5px; margin-left:-75px;
		color:#324040; text-align:center;
		background:#04b3d2;
		border-radius:4px; box-shadow:0px 0px 6px rgba(0,0,0,0.7);
		/* définition du point d'origine de la transformation */
		transform-origin: 50% 25px;
		
		/* pour la transition (pas transformation) de couleur */
		transition-property: background;
		transition-duration: .7s;
		transition-timing-function: ease-out;
	}
	#div4 dl.fiche:hover {background:#f4e352;	} /* couleur de fin de transition */
	
	#div4 dd {padding-top:20px;}
	#div4 dt{ /* positionnement du texte contenu dans la fiche */
		position:absolute; top:0px;
		width:100%; height:20px;
		padding-top:5px;
		text-align:center;
	}
	
	/*Puis au hover, on translate la fiche de 220 px :*/
	#div4 dl.fiche:hover{transform: translateY(-230px);}
	
	/*Etape 2 : ajout des animations*/
	
		/*Ensuite, les animations permettent de déplacer la fiche avec un effet de rebond : le menu monte un peu plus haut avant de revenir.
		Tout d’abord la fiche monte (pull up)*/
		#div4 dl.fiche:hover{animation: pullUp 0.7s ease-in-out ;}
		@keyframes pullUp {
			from {transform:translateY(0px);}
			90%{transform:translateY(-240px);}
			to {transform:translateY(-230px);}
		}
		
		/*Puis redescend (animation pullDown) :*/
		#div4 dl.fiche{ animation: pullDown 0.7s ease-in-out; }
		@keyframes pullDown {
			from {transform:translateY(-230px);}
			90%{transform:translateY(10px);}
			to {transform:translateY(-0px);}
		}
		/*Enfin, une div id="masque" et une div id="ombre" sont nécessaires pour créer l’effet de superposition des éléments et ainsi permettre au menu d’être caché. À vous d’adapter ensuite ce code pour vos designs. Regardez le code source dans la partie "head" pour le code complet.
		Note : n’oubliez pas non plus l’ajout de tous les préfixes propriétaires pour un fonctionnement dans la majorité des navigateurs du marché.
		*/
		#div4 .masque{
			position:relative;
			z-index:50;
			width:400px;
			height:280px;
			bottom:240px;left:0;
			background:#627878;
			background:linear-gradient(#324040,#627878);
			border-radius:10px;
		}
		#div4 .masque div{
			width:100%;text-align:center;color:white;font-size:3em; padding-top:20px;
		}
		
/*
		#div4 .masque::after{
    content: '';
        width: inherit; height: inherit;
    width: inherit; height: inherit;
    background: -moz-element(#divText);
}
*/
		#div4 .ombre{
			position:relative;
			z-index:40;
			width:380px;
			height:6px;
			bottom:0px;
			margin-top:0px;
			left:10px;
			box-shadow:0px 100px 3px red;
			border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
		}