Permet d'appliquer un effet (rotation/translation/scaling/3D/skew/perspective) à un élément.
Possible d'appliquer plusieurs effets à un même élément.
VIP : l'élément transformé ne modifie pas son espace utilisé pour correspondre à la transformation, mais continu au contraire d'occuper son espace original. La transformation n'est qu'un effet visuel.
transformations disponibles :
none
matrix(n,n,n,n,n,n) : ?????
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : ?????
translate(x,y)
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
scale(x,y)
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
skew(x-angle,y-angle)
skewY(angle)
skewX(angle)
rotate(angle)
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
transform : translate(25px,25px) ;
transform : scale(0.9, 2.5) ;
transform : skew(0deg, 45deg) ;
transform : rotate( -45deg) ;
transform : rotate( -45deg),
scale(0.9, 2.5),
skew(0deg, 45deg),
translate(25px,25px) ; transform-origin :
[x-axis y-axis z-axis]
Permet d'indiquer la position du point utilisée pour les rotations et skew (et effets 3d?)
transform : rotate( -45deg) ;
transform-origin : 0% 0% ; transform : rotate( -45deg) ;
transform-origin : 50% 50% ; transform : rotate( -45deg) ;
transform-origin : 100% 100% ; transform : rotate( -45deg) ;
transform-origin : 50px 50px ; 3D
perspective
Plus cette valeur est basse, plus on est proche du sujet (donc déformation plus importantes.)
VIP : pour que les effets 3D fonctionnent, besoin d'un parent qui sert à indiquer la perspective pour ses childs.
perspective-origin[x-axis y-axis]
Indique le point utilisé pour la perspective.
transform-style[flat | preserve-3d]
Indique si un child doit préserver la déformation 3D ou non.
backface-visibility[visible | hidden]
Indique si, après transformation 3D, la face arrière doit être visible lorsque l'objet est inversé.
parent {
perspective : 1830px ;
perspective-origin : -10% 100% ;
transform-style : preserve-3d ;
}
child {
backface-visibility : visible ;
transform : rotateY(20deg) ;
}