Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » CSS » Rotation zoom en CSS

Rotation zoom en CSS

06/17/2011 par Dux   -   4.2/5 (34 notes)

Voici deux exemples de rotation et scale (zoom) avec CSS3.
Le premier exemple utilise le javascript pour appliquer les effets de transition en changeant la classe CSS d'un élément. Ce qui permet de déporter l'événement sur une autre zone.
Le deuxième exemple plus simple fonctionne avec la pseudo_classe HOVER.

Les effets avec Firefox ne fonctionnent pour l'instant que sur des éléments "inline". C'est pourquoi au lieu d'utiliser un DIV dans le second exemple, j'ai transformé un a href en block avec la propriété display:block.
Ce code est compatible avec Opera dernière version uniquement.

Demo.

Click here to rotate and scale


Drop your mouse pointer on this DIV to test.

code source



 
<style type="text/css">

/* Example 1 */
.rotation {
   
height: 200px;
}
.
rotation1 {
   
height: 200px;
   -
webkit-transition: 1.5s all ease-in-out;
   -
moz-transition: 1.5s all ease-in-out;
   -
o-transition: 1.5s all ease-in-out;
   
transition: 1.5s all ease-in-out;
}
.
rotation2 {
   
height: 200px;
       
   -
webkit-transition: 1.5s all ease-in-out;
   -
moz-transition: 1.5s all ease-in-out;
   -
o-transition: 1.5s all ease-in-out;
   
transition: 1.5s all ease-in-out;
       
   -
webkit-transform: rotate(360deg) scale(-1, -1);
   -
moz-transform: rotate(360deg) scale(-1, -1);
   -
o-transform: rotate(360deg) scale(-1, -1);
   
transform: rotate(360deg) scale(-1, -1);
}

/* Example 2 */
.ex_zoom {
       
position: relative; width: 140px; margin: auto; padding: 10px; background: cyan; display: block;
       
color: black; text-decoration: none;
       
   -
webkit-transition: .5s all ease-in-out;
   -
moz-transition: .5s all ease-in-out;
   -
o-transition: .5s all ease-in-out;
   
transition: .5s all ease-in-out;
}
.
ex_zoom:hover {
   -
webkit-transform: rotate(355deg) scale(2);
   -
moz-transform: rotate(355deg) scale(2);
   -
o-transform: rotate(355deg) scale(2);
   
transform: rotate(355deg) scale(2);
       
   
box-shadow: 2px 2px 5px #000;
   
-webkit-box-shadow: 2px 2px 5px #000;
}

</
style>

<
div style="text-align:center">
<
a href="javascript:void(0)" onclick="document.getElementById('imgeffect').className = (document.getElementById('imgeffect').className == 'rotation2') ? 'rotation1' : 'rotation2';">Click here to rotate and scale</a>
<
br />
<
img src="example/Lady_Gaga.jpeg" id="imgeffect" class="rotation" />
<
br /><br />
<
a href="javascript:void(0)" class="ex_zoom">
Drop your mouse pointer on this DIV to test.<br />
<
img src="example/Lady_Gaga.jpeg" style="width: 100px" />
</
a>

</
div>

Testé avec Safari  Google Chrome  Firefox4  Opera  
Noter ce code     |     Copié : 771x

Commentaires pour Rotation zoom en CSS

max     12/07/2012 19:36
Very good
baloo     02/26/2012 12:21
hélas IE, l'usine à gaz du net, ne veut pas de ces effets. Comment faire???
balan     12/22/2011 14:19
Good one
Ajouter un commentaire Pseudo   Site
ZOOM


Zoom infini CSS3 et Javascript
Rotation zoom en CSS
Zoom en CSS3
Centrer un élément dans la page
Loupe image javascript
Simple galerie d'images PHP
Fonction simple pour la coloration syntaxique PHP
Div qui suit le scrolling de la page
Ajouter des lignes de champs à un formulaire dynamiquement
Opacité avec javascript