Guillaume Duverger - DĂ©veloppement & Graphisme - Blog

Vous ĂȘtes ici : Accueil > DĂ©monstrations > CSS > Autres

Effet vertigo avec CSS

Code :

HTML


<div class=cadre-demo>
<div class=demo>
<div class='perso'></div>	
<div class='cadre-fond'>
<div class='fond'></div>
</div>
</div>	
</div>


CSS


.cadre-demo{
	
margin:5rem auto;
max-width:611px;
max-height:408px; 
	
	}
	
.demo{
	
width: 100%; 
padding-top:66.78%;
position: relative;
overflow:hidden;
	
	}
	
.cadre-fond {
	
position: absolute;
perspective: 400px;
height:408px;
width:611px;
transform-style: preserve-3d;
top:0;
left:0
}


	
.perso {  
z-index:1;
position: absolute;
left:0;
right:0;
margin:auto;
bottom:0;
background-image: url(perso.png);
height:257px;
width:246px;
}

.fond{
	
background-image: url(fond.jpg);
transform: translateZ(200px);
height: 100%;
transition: transform 5s,filter 2s 1s;
	
}


#demo:checked~.cadre-demo .fond {
  transform: translateZ(0);
  filter: blur(4px);

}

Support navigateurs :

CSS perspective

Vous rencontrez un problÚme avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă  quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.