28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Créant un parallélogramme à l'aide de transform skew, si j'applique un pseudo élément dont je souhaiterais rétablir les proportions je me heurte à ce qui me semble être un bug car les proportions d'origine ne peuvent être rétablies que si j'ajoute un correctif d'angle.

Autrement dit, si je fais un transform skew(20deg) sur un élément il ne suffira pas de mettre un transform skew(-20deg) sur son pseudo élément déclaré pour rétablir ce dernier dans des proportions correctes.

Un exemple en ligne : Bug with transform skew ?

Quelqu'un a t'il déjà été confronté à ce problème ?
Modifié par Olivier C (09 Dec 2016 - 07:29)
Administrateur
Bonjour,

tu ne fais pas seulement un skewX(-20deg) mais aussi un rotate(-20deg) dans la foulée.
Pour "déconstruire" cela, enfin faire la transformation inverse, il te faut d'abord faire un rotate(+20deg) puis un skewX(+20deg).

edit : toute transformation 2D ou 3D correspond à un objet mathématique qui est la matrice (un zouli tableau avec plein de 0 et quelques 1 ou autre valeur déterminées par la transformation). Enchaîner les transformations, c'est multiplier les matrices de chacun pour obtenir une nouvelle matrice "résultat" et comme il y a un ordre (A.B != B.A), l'ordre dans lequel tu fais les transformations est très important (càd que ça ne donne pas du tout le même résultat).
https://en.wikipedia.org/wiki/Transformation_matrix#Examples_in_2D_computer_graphics
Smiley morpheus
L'opération inverse demande à calculer l'inverse de la matrice résultat (ça se note avec l'exposant -1, comme pour les nombres où l'inverse de x = 1/X = x^-1) et il y a cette propriété intéressante avec les matrices que https://wikimedia.org/api/rest_v1/media/math/render/svg/a14fddcdc5b72a8434823a2df8fef5564f5c8bbc (A.B)^-1 = B^-1.A^-1 soit "Le produit, dans un ordre, de deux matrices inversibles est inversible, et l'inverse du produit est le produit des inverses, dans l’ordre contraire"
https://fr.wikiversity.org/wiki/Matrice/Inverse
Modifié par Felipe (09 Dec 2016 - 06:36)
Meilleure solution