CSS3
Les transformations
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.
Rotation en CSS
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.
Mise à l'échelle en CSS
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.
Translation
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)}
}
L'inclinaison
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.
Ordre d'application des transformation
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)
}
Effets 3D avec les transformation 2D
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%)}
}
