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

Répandez vos soluces sur la planète

Love me
Solucior » CSS » Zoom en CSS3

Zoom en CSS3

05/25/2011 par Dux   -   4.6/5 (135 notes)

CSS3 autorise la fonction de "scaling" (ou zoom) sur un élément HTML. Dans l'exemple ci-dessous, le scale est attribué à la pseudo classe hover.

Syntaxe :
transition: (transition-property) (transition-duration en secondes) (transition-timing-function)
- transition-property : all, css property
- transition-duration : timing secondes
- transition-timing-function : ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier

Mise à jour
Compatible IE9 et compatible partiellement avec les anciennes version IE

Demo.

pointer over here
CSS3 allows the function of "scaling"(or zoom) on an HTML element. In the example below, the scale is assigned to the pseudo class : hover.
CSS scale

code source



 
<style type="text/css">
.
zoom {
   
width: 200px; padding: 5px; border: 1px solid black;
   -
webkit-transition: all .3s ease-out;
   -
moz-transition: all .3s ease-out;
   -
o-transition: all .3s ease-out;
   
transition: all .3s ease-out;
}
.
zoom:hover {
   -
moz-transform: scale(2);
   -
webkit-transform: scale(2);
   -
o-transform: scale(2);
   
transform: scale(2);
   -
ms-transform: scale(2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   
M11=2, M12=-0, M21=0, M22=2);
   }
</
style>

<
div class="zoom">
   
Div content here
</div>

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

Commentaires pour Zoom en CSS3

LaurentR2D2     05/25/2013 02:05
Merci pour ce code qui m'a bien aidé
ej     04/16/2013 19:10
exactly what i looked for
Wolf number 7     03/01/2013 16:01
Thank you .
nik     01/10/2013 08:20
great
jagujailor     12/04/2012 10:33
hi thanks for solving problem
ganchan     10/29/2012 15:20
have you see that all the anchor tags on webkit during transition became thinner ?
Will     10/02/2012 12:15
Bonjour,
est ce que je peux l'attribuer à toute les photos dejà posté sur mon blog?
Dans ce cas je le place ou?

merci
raj     09/24/2012 05:25
Nice code .... great use of ccs3
gromit     08/18/2012 21:26
thanks for the nice code
tom     07/06/2012 00:57
awesome thanks!
Pop     06/13/2012 04:30
Like!
Arun@BLDE     03/16/2012 21:24
Hey Thanks a lot Diploma@t
pm666m     03/08/2012 07:30
suppot IE 8 ?
sdhd     02/23/2012 00:01
usefull :D
devunknown     02/22/2012 11:17
tnx for the tip, works very nice
joel     01/20/2012 21:21
epatant
xixi     10/23/2011 14:19
Super merci beaucoup pour ce code ! Malheureusement il a  un effet de pixellisation sur les animation flash que je n'arrive pas à résoudre ... une idée pour remédier à ce problème ??
Diplom@t     09/29/2011 16:59
Scale for IE:
-ms-transform: scale(2,2);
~Drey     09/22/2011 05:21
FANTASTIC!!! :) Helped me a lot. Thanks Man!
dc     09/09/2011 10:45
FANTASTIC  and IMPRESSED
Thank you
netsi1964     08/30/2011 10:02
Hi,
I love this effect :-) But it has the downside that it always scales from center.
Sometimes you want it to for instance scale from top left.

/Sten
Ajouter un commentaire Pseudo
ZOOM


Zoom infini CSS3 et Javascript
Zoom en CSS3
Rotation zoom en CSS
Loupe image javascript