Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Autres

Réflexion sur image en CSS

Code

HTML


<div class="votre_class">
<img src="image.jpg" alt>
<img src="image.jpg" alt>
</div>


CSS


.votre_class1 img:last-child{

transform:matrix(1,0,0,-1,0,0);/*on met -1 pour tourner l'image*/
}
	
.votre_class1{margin:2rem auto;position:relative}
	
.votre_class1:before {
display:block;
width:100%;
max-width:420px;
height:50%;
bottom:0;
left:0;
z-index:1;
position:absolute;
content:'';
background:linear-gradient(to bottom,hsla(0,0%,98%,.5) 20%,hsla(0,0%,98%,1))
	
	}

Support navigateurs :

CSS transforms2d

Source, inspiration, ressources :

Matrix3d transforms (EN) .

CSS3 transformations 2D .

Voir aussi sur le blog les transformations 3D en CSS.

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.