J’aurais pu mettre dans
le dernier article en date, mais ici c’est juste un petit truc de rien du tout.
Avec Transform, on peut modifier l’apparence des éléments : taille, rotation, translation.
Pour prendre un bloc de 400px qui est adjacent à un bord de l’écran et le faire sortir de l’écran, on peut faire ça :
#bloc {
transform: translateX(-400px);
}
Ça marche mais ceci est mieux :
#bloc {
transform: translateX(-100%);
}
Le truc c’est que transform considère la taille de l’élément lui-même et non celui du parent (contrairement à width, flex et toutes les autres : ceci est une grande nouveauté et permet d’intéressants effets de centrages, comme le centrage d’une image, quelque soit sa taille, quelque soit son ratio :
http://lehollandaisvolant.net/?mode=links&id=20150731185744 et sans JS ).
Maintenant mon astuce : je veux déplacer le bloc hors de l’écran, mais qu’il dépasse quand même un tout petit peu (10px) pour qu’il soit possible de faire ressortir au hover (les 10px sont pour donner une zone ou mettre la souris pour le hover).
Je fais quoi ?
J’aurais tendance à faire ça :
transform: translateX(-390px);
Mais c’est en pixel, pas en taille absolue…
Ça alors :
transform: translateX(-97,5%);
Mais ça revient au même : les 2,5% manquant ici correspondent à 10px uniquement parce que le bloc fait 400px.
On peut essayer avec calc(), où on a plusieurs solutions :
transform: translateX(calc( -100% + 10px);
transform: translateX(- calc(100% - 10px);
mais ça ne fonctionne pas, en plus d’être confus et casse-gueule.
La solution c’est de faire ça :
transform: translateX(-100%) translateX(10px);
Et ça, ça marche. Le navigateur va prendre le bloc, le décaler sur la gauche de 100% de son "width" (attention aux marges), puis le décaller de 10px sur la droite, cette fois.
C’est tout à fait clair et logique quand on y pense.