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)…