http://jsbin.com/bobizoma/1/edit
Les transformations permettent d'agir sur les éléments de la page en les déformants selon des formules géométriques bien connues : translation, rotation, inclinaison... Ces transformations ont souvent peu d'intérêt dans les mise en page qui restent en général très rectangulaires, mais prennent tout leur sens dans des animations en offrant des possibilités graphiques nouvelles.
Les transformations vont toutes être effectuée par l'utilisation de la propriété transform
qui prendra en valeur l'effet de transformation souhaité et son taux de transformation de la façon suivante :
transform : type_de_transformation(valeur);
on pourra cumuler les transformations en les listant, séparées par un espace :
transform : type_de_transformation(valeur) type_de_transformation(valeur);
Chaque transformation possède un mot-clé générique et une variante qui précise l'axe de transformation avec X, Y ou Z.
La rotation sera basé sur la transformation identifié par le mot clé rotate
. Mais il existe d'autres transformations rotateX
, rotateY
et éventuellement rotateZ
.
p#id2{
-webkit-transform: rotateY(0deg);
-webkit-animation-name : trans1;
}
@-webkit-keyframes trans1{
from {
-webkit-transform:rotateY(0deg)
}
to {
-webkit-transform:rotateY(360deg)
}
}
La rotation, comme on peut le voir est exprimée en degré, deg
.
La mise à l'échelle ou homothétie permet de changer la dimension des éléments en rapport avec leur taille actuelle, c'est-à-dire sans changer les valeurs appliquée à width et height.
p#id1{
-webkit-transform: scale(1);
-webkit-animation-name : trans2;
}
@-webkit-keyframes trans2{
from{-webkit-transform:scale(1)}
to{-webkit-transform:scale(0.5)}
}
L'échelle est par défaut exprimé entre valeur de 1 (taille actuelle). Ce qui est inférieur à 1 réduit la taille et ce qui supérieur l'augmente selon un produit :
taille actuelle * scale = taille finale.
La translation permet de faire des déplacements dans la page en spécifiant la distance à parcourir au lieu de définir la nouvelle position comme il faudrait le faire avec les propriétés top, left ou encore margin-top margin-left.
p#id3{
-webkit-transform: translate0);
-webkit-animation-name : trans3;
}
@-webkit-keyframes trans3{
from{}
to{-webkit-transform:translate(400px)}
}
La dernière des transformations est l'inclinaison.
p#id4{
-webkit-transform: skew(0);
-webkit-animation-name : trans4;
}
@-webkit-keyframes trans4{
from{}
to{-webkit-transform:skew(45deg)}
}
On retrouve comme d'habitude la possibilté de mettre deux valeurs pour définir les deux sens de déformation sous la forme skew(20deg 45deg)
ou encore en passant séparément par skewX
et skewY
.
Il est important de bien choisir l'ordre dans lequel les transformations seront appelée car le résultat peut changer radicalement. Par exemple :
p {
background : red;
width:100px;
height:100px;
}
#id1 {
-webkit-transform: skew(45deg) rotate(45deg)
}
#id2 {
-webkit-transform: rotate(45deg) skew(45deg)
}
Un bon usage des transformation 2D peut aboutir à des effets de dessin en 3D comme par exemple ce cube.
<body>
<p id="id1">ID1</p>
<p id="id2">ID2</p>
<p id="id3">ID3</p>
</body>
p {
position: absolute;
margin-left:100px;
height: 100px;
width: 100px;
}
#id1 {
background: #9acc53;
-webkit-transform:
rotate(-45deg)
skew(15deg, 15deg);
}
#id2 {
background: #8ec63f;
-webkit-transform:
rotate(15deg)
skew(15deg, 15deg)
translate(-50%, 100%);
}
#id3 {
background: #80b239;
-webkit-transform:
rotate(-15deg)
skew(-15deg, -15deg)
translate(50%, 100%);
}
#id3:hover {
-webkit-animation-name:porte;
-webkit-animation-duration:2s;
}
@-webkit-keyframes porte{
from {}
to { -webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(-50%, 100%)}
}
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.