Aujourd’hui nous allons voir deux nouveaux effets réalisés en css3. Ces effets sont des effets de transformation, un changement d’échelle (avec la propriété transform : scale) et une rotation (avec la propriété transform : rotate).
Ces effets peuvent s’appliquer à toute balise. Ici j’ai choisis une liste d’images mais j’aurai très bien pu prendre un menu, un paragraphe, etc…

Voici une démonstration du résultat :
(c’est toujours pareil, les propriétés CSS3 ne sont pas reconnus par tous les navigateurs et donc je vous conseil de vous munir d’un navigateur récent tel que Chrome 12, Firefox 4, Safari 5 ou bien Internet Explorer 9)

    DÉMONSTRATION

Et à présent voici le code à utiliser :

La partie HTML est très simple

<!-- code html -->

<ul class="css3rotate"> 
	<li><a href="#"><img src="image1.jpg" /></a></li><!-- Je vous conseille de partir avec des photos de plus grande taille que ce que vous affichez à l'écran car sinon au moment de l'agrandissement la photo va pixelliser -->
	<li><a href="#"><img src="image2.jpg" /></a></li>
	<li><a href="#"><img src="image3.jpg" /></a></li>	
</ul>

La partie CSS

/* code css */

/* Ce sont les paramètres à utiliser pour avoir le même rendu que moi*/

ul.css3rotate {
	overflow: hidden;
	background: #373737;
	margin: 0;
	padding: 30px 18px;
}

ul.css3rotate li {
	float: left;
	margin: 0 10px;
	padding:5px;
	border: 1px solid #444;
	list-style: none;
	background: #fff;
}

ul.css3rotate li a img  {
	float: left;
	width: 165px;
	margin: 0;
	-webkit-transition: -webkit-transform 0.2s ease-in-out;/* Utilisé pour la transition sur chrome et safari */
	-moz-transition: -moz-transform 0.2s ease-in-out;/* Utilisé pour la transition sur Firefox */
	transition: transform 0.2s ease-in-out;
}

ul.css3rotate li a:hover img {
	-webkit-transform: scale(1.4) rotate(-10deg);/* Agrandissement de la photo à l'échelle 1.4 et rotation de -10 degrés */
	-moz-transform: scale(1.4) rotate(-10deg);
	-o-transform: scale(1.4) rotate(-10deg);
	transform: scale(1.4) rotate(-10deg);
	-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); /* L'ombre appliquée sur la photo au survol */
	-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Voilà c’est fini pour aujourd’hui, j’espère que ces petits effets pourront vous servir.

NB : VOUS POUVEZ APPLIQUER CES EFFETS ET S’ILS NE SONT PAS RECONNUS PAR LE NAVIGATEUR, IL N’Y AURA AURA AUCUN PROBLÈME D’AFFICHAGE SIMPLEMENT IL N’Y AURA PAS D’EEFET DONC NE VOUS METTEZ PAS DE BARRIÈRE POUR LES UTILISER (À BON ESCIENT)…

14 comments
aymen
aymen

salut, tout d'abord merci pour ce tuto..et merci pour l'effort que vous faite, si non, je voulais savoir si il y a une solution pour que les images ne seront pas pixelisé ou même décalé..merci d'avance

admin
admin

Bonjour, je ne sais pas si l'on peut optimiser cette transition. cela dépend des navigateurs aussi. A + :)

J2BB
J2BB

Une feature franchement intéressante que je me suis empressé de mettre en place sur mon portfolio, donc merci pour le tuto !! :P Par contre je rencontre un soucis : si j'utilise le box-shadow, mes photos deviennent légèrement floues une fois la rotation terminée (sur Firefox, mais pas sur Chrome). J'ai donc testé sur la démo ci-dessus, et si on regarde bien on a le même problème :/ Quelq'un aurait une idée à ce sujet ? Merci d'avance ;)

hcgcompletediet
hcgcompletediet

I do not know if it's just me or if everyone else encountering issues with your site. It looks like some of the written text on your posts are running off the screen. Can someone else please provide feedback and let me know if this is happening to them as well? This could be a problem with my web browser because I've had this happen before. Thank you

Matt
Matt

Saved as a favorite, I really like your website!

Oups
Oups

Superbe tuto Je l'ai utilisé pour la rotation de l'image "logo" d'un Wordpress Tweenty 11.... très cool Merci

Asco
Asco

cool mais le contour on peut pas le garder car ça pixelise le contour de la photo....champion du monde...

admin
admin

Je ne trouve pas spécialement mais peut-être que la pixellisation se voit plus sur du blanc ;) Champion du monde

Sebb
Sebb

C'est so FRESH !