99% des développeurs ignorent cette règle en CSS
Вставка
- Опубліковано 16 вер 2024
- Rejoignez moi sur Twitter :
/ benjamincode
Mon décor est un décor 3D réalisé par un artiste 3D recruté sur Fiverr comme vous pouvez le voir dans cette vidéo :
• Des artistes me créent...
Le freelance est Asahakira : fvrr.co/3cuWA4Z
Trouvez un freelance pour n'importe quel tâche sur Fiverr et utilisez mon code promo pour avoir 10% de remise sur votre mission : BCODE10
fvrr.co/3u0knj3
Insta : / benjamincode
Twitch : / benjamincode
Mail : b1jam1code@gmail.com
Merci à Matei Convard qui m'aide avec ma chaîne en réalisant toutes les thumbnails et de nombreux assets graphiques dès que j'ai besoin. Mec en or hyper fiable et rapide en plus d'être un de mes plus vieux amis :
/ wutezluv
Merci à son frère Andrei Convard aka Obsimo de m'avoir envoyé ses musiques sans les voix pour que je puisse les utiliser dans le fond de mes vidéos. Allez checker sa musique et abonnez vous à sa chaîne, il est très bon :
• Obsimo - Club Memories...
Très souvent, la musique de fin de mes vidéos est une musique de Coloré, dont le titre est Desert Sand. Vous la trouverez ici :
• COLORÉ - DESERT SAND
Je m'attendais a un truc de ouf, mais oui je connaissais l'importance de l'ordre perso :)
Je te jure pour moi c'était fou car je fais du CSS depuis plus de 15 ans et j'avais jamais capté ça ! En vrai de base, j'écris toujours mes translate en premiers et les rotate en suivant donc je m'étais jamais vraiment rendu compte du premier problème, ni de sa solution ! Et jamais je me serais douté que l'ordre dans le transform avait son importance car pour d'autres propriétés comme border par exemple, l'ordre dans lequel tu passes les parametres, ça n'a aucune importance...
Je ne pouvais pas ne pas parler de cette découverte ahah
@@BenjaminCode En tout cas on arrête jamais d’apprendre ;)
idem
En tant que débutant très novice j’avais compris l’importance de l’ordre dans le transform, Benjamin tu déconne là
en 15 ans d'utilisation des transform j'ai jamais rencontré le problème donc j'avais fini par croire que l'ordre n'avait aucune importance... En fait c'est que j'ai toujours mis les translate en premier car je trouvais ça plus lisible...
Je ne suis pas developpeur CSS mais C++ et je connais ce comportement parce que je l'ai déjà croisé des dizaines de fois dans mon domaine (dev dans le domaine du dessin et de l'animation).
Le comportement est tres facile a reproduire en vrai pour comprendre comment ça marche.
Prend ton téléphone et affiches-y ton demi carré, ensuite associe une direction à chaque coté de ton téléphone (haut, bas, gauche, droite).
Tu applique la rotation à ton téléphone, 45°, ok.
Et maintenant que ton téléphone est penché, tu applique un translate vers la droite, et pour ça tu dois aller dans la direction que t'indique le coté de ton téléphone que tu as nommé "droite".
Tu noteras alors que ta main vas effectivement descendre en diagonale dans la vraie vie.
Ce que ça signifie, c'est que lorsqu'on applique une transformation en CSS, on ne déplace pas l'objet par rapport à un référentiel fixe mais par rapport à lui même.
(J'espère que j'ai pas dit trop de conneries mais c'est comme ça que je le perçois)
L'ordre est important, car derrière un "transform" c'est des opérations matricielles qui sont appliquées donc il faut respecter l'ordre :)
en effet ;)
Pour les transforms je ne savais pas mais je sais que de façon générale, la pile d'execution et donc l'ordre d'appel des fonctions est toujours important voir très important peu importe les langages et les environnements de dev. Il faut donc toujours le prendre en compte !
Pareil, je m'attendais à un truc de ouf. Mais oui, je le savais déja et c'est même totalement intuitif que ça fonctionne comme ça.
Je pense que ta confusion vient de l'absence de priorisation dans l'ordre d'execution des règles CSS. Là en l'occurrence, ce ne sont pas des règles / attributs "toto: titi;" mais l'application de FONCTIONS => "do(...)". Ça applique donc à l'objet du DOM une matrice de transformation mathématique. le repère pivote également après la rotation et les changements étant tous relatifs à ce dernier... l'ordre est important.
Je savais.
Je suis "l'abonné" à l'origine de cette vidéo.
Pour avoir le background, je suis intégrateur depuis 15 ans et j'ai appris ça il y a pas longtemps.
Cool la collab avec Basti, j'ai hâte de voir ce que ça va donner. Je tenterai peut-être le challenge !
Merci du coup ^^. Je me suis cassé les dents sur ca je pense pas mal de fois ou j'avais l'impression de faire deux transform identiques mais avec un résultat diffèrent :'(
Mentir c'est pas bien
@@blkemerone4099 ?
Je connaissais déjà ,
l'astuce est la même que lorsque l'on travaille sur des outils comme Unity pour créer des objets et animations ;)
Je débute en web dev et je suis tout à fait surpris !! J'en apprends beaucoup avec tes vidéos, merci !!
Salut ✌️ Mec j'adore tes vidéos ! Continue !
J'avoue que je connaissais l'astuce mais c'est parce que j'ai fais de l'OpenGL et c'est la même gymnastique
C'est énorme ! Je ne savais pas effectivement et ça explique pas mal de chose ^^
Du coup, si je comprends bien, si la rotation est en premier, on change en premier l'angle de l'axe x, ce qui fait que si on translate après sur l'axe x, notre élément se retrouve en bas à droite.
C'est bon à savoir.
Après reflexion c'est logique, le translate va se baser sur la représentation cartésienne du DOM. Donc si on le rotate puis translate, il avancera certes, mais tout droit après le rotate. C'est vrai que je n'avais jamais fais attention à ce détail auparavant :)
Pas mal de galères dans le passé avec ces foutus transform haha.
Une bonne vidéo! Signé un autre dev front
J'avoue que je ne savais pas 🙃
Merci pour l'info, je vais arrêter de mépriser CSS parce qu'il me donne sans cesse des leçons d'humilité 😄
J'ai souvent eu ce cas dans mes projets, du coup ce n'était pas une surprise ^^
C'est toujours cool de découvrir des petits tips comme ça qui simplifient la vie
J'ai appris l'ordre des transform à mes dépends lorsque je me suis amusé sur quelques css battles
D'après ce que j'en comprends, lorsqu'on transform, ce n'est pas uniquement "l'objet" carré, mais tout le référentiel. En comprenant cela on s'évite quelques désagréments lorsqu'on enchaine les trasnforms.
Le youtuber/twitcher Kevin Powel et tous ses copains css gurus m'ont aussi bcp inspiré
L'ordre des opérations que tu évoques, c'est quelque chose qu'on découvre très vite quand on fait de l'OpenGL. C'est en 3D au lieu d'être en 2D, mais c'est le même principe. Souvent d'ailleurs on fait des choses du genre: translation, rotation, puis translation inverse, pour tourner l'objet dans un repère local plutôt que global. J'imagine que c'est possible aussi en css et en 2D.
Merci Ben, je découvre totalement pour l'ordre dans le transform ; je n'avais le réflexe pour l'ordre des valeurs que pour d'autres propriétés raccourcis comme font, flex, border & cie
Non elle n'est pas inconnue, il faut juste lire les spécifications :
One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.
Je ne savais pas du tout ! J'ai déjà eu le problème sur divers projets mais j'ai jamais pensé à l'ordre 😂. Bah merci à toi.
Oui je le savais (transformation géométrique, homothéties, isométrie, ….) et cela me fait d’ailleurs penser à une question qui a tourné sur le web : « un développeur doit il avoir nécessairement des connaissances en mathématiques (bac + 2 min) pour être un bon dev ? ». Le sujet que tu viens d’aborder répond implicitement à cette question.
Ne pas avoir de connaissance en mathématiques n’est probablement pas nécessairement bloquant pour être aujourd’hui un dev. La raison est qu’aujourd’hui un dev accède à un paquet de choses déjà faite, une super assistance des IDÉ de plus en plus performants donc le dev aujourd’hui bénéficie d’une certaine panoplie d’outils qui peuvent compenser la lacune mathématiques. Mais dès lors que le dev doit mettre les mains dans la « merde » car aucune autre solution compensatoire va l’aider. A ce moment-là, ses connaissances mathématiques et son expérience vont l’aider à résoudre. Les math sont justement l’autre Arsenal de connaissances qui me paraissent fondamental pour un dev….
Point de vue
Nota : j’aime beaucoup ce que tu fait
Oui je connais l'importance de l'ordre. Animation intéressante. Et je confirme que Lior Chamla est un super formateur.
très intéressant :) Maintenant que je deviens un dev front end, je vais être obligé de m'abonner :)
Je suis encore en phase d'apprentissage, alors oui je savais que l'ordre était important mais pas sur rotate translate ! Super merci :)
99% des devs ignorent les bases de la géométrie ???
Je ne crois pas non 🤣
Je m'attendais tellement a truc de ouf ! Une instruction passée sous silence dans une ancienne version 🤣
Bon ça m'a quand même fait rigoler 👍
Toi ca ta fait rire moi j'avais le seum mdr
j voulais tellement apprendre un truc de ouf comme promis 🥲
Je suis en train de faire la formation Open Classroom Dev Front et dans le cours sur les animations c'est bien précisé !
AHAHAH Je suis tellement partagé... Je suis méga fier d'apparaître dans une de tes vidéos mais quand je vois la raison ... j'ai des doutes! 🤣
En vrai pour ma défense, j'ai pas fait gaffe mais j'avais sorti mon span de ma div c'est pour ça que ça faisait 2 cacas dégueu séparés ! C'était beaucoup moins pire quand j'ai corrigé ça après !
Mais oui j'ai tout réparé après et je vais poster le résultat final du coup quand même (pour la gloire !) :D
Et bien évidemment, non je ne savais pas que l'ordre avait une importance dans le transform ^^
Tu es le plus respectable de tous Valentin.
Tu es en plein apprentissage autodidacte et tu te donnes à fond sur des challenges pas facile. Oui le résultat est éclaté, mais il n'en n'est pas moins respectable ! Gros bravo et bon courage pour la suite ! Et en effet ton résultat corrigé que tu m'as montré ce matin sur Twitter est déjà beaucoup mieux !
La multiplication de matrices n’est pas commutative. Les transforms sont des multiplications matricielles. Les maths sont partout 😆
6:10 Je savais pas. Après j'fais plus souvent du back que du front :P
Ah non je ne savais pas du tout... Merci pour la découverte !
trop fort ! je connaissais pas l'astuce ! merci
J'ai déjà eu le problème et je ne connaissais pas le tips ! Bien ouèj !
Perso je connaissais grâce au tuto animations CSS de The Net Ninja ! Pour le dire autrement :
.img1 {
transform: translateX(100px) rotateZ(-90deg)
}
donne le même résultat que:
.img2 {
transform: rotateZ(-90deg) translateY(100px)
}
C'est génial ! Félicitations à l'abonné qui a partagé l'info.
Est-ce que ce comportement est identique dans chaque navigateur ?
+ si on lisait les specs, on saurait.
Merci pour l astuce !! Je ne connaissais pas !
je connaissais déjà le truc de l'ordre qui est important
Ahah, moi aussi je m'attendais à un truc génial, mais je connaissais ^^ je le montre à chaque fois en cours en utilisant un skew rotate puis rotate skew ;)
Haha j'ai appris ça à mes dépends la semaine dernière en essayant d'appliquer un rotate + transform, mais je me suis gratté la tête un moment avant de comprendre pourquoi ce que je faisais ne marchait pas !
Yup, je connaissais parce que j'ai eu la bonne idée de faire des animations de flèches qui se dédoublaient et formaient une croix de fermeture pour un menu latéral. Parce que j'aime bien comprendre comment ça fonctionne et que j'ai voulu reproduire cet effet vu dans une biblio js.
Je ne savais carrément pas qu'il y avait un ordre ... merci pour l'info 👍
Génial, tu m'apprends un truc là :)
Hello Benjamin,
Déjà force à toi, j'aime bcp tes vidéos et le mood que tu dégages :)
Et sinon oui je connaissais déjà
Pour l'astuce je l'avais déjà compris depuis le début, puisque étant un développeur Unity et UE, cela fonctionne exactement de la même manière.
Certains pensent que développeur front-end est le nouveau nom d'intégrateur. Je pense que non, ce sont deux métiers différents, l'intégrateur étant très pointu dans les connaissances en HTML et CSS (et que personne ne dise que le HTML s'apprend en 2 jours, c'est entièrement faux, ça prend même des années, sinon tous les sites seraient accessibles par exemple).
À mon avis, un intégrateur connaîtrait ce point sans sourciller.
Le développeur front-end restant un développeur, qui connaît bien le HTML/CSS certes, mais généraliste, avec donc un fort bagage en développement, JS et ses framework notamment, mais moins pointu en HTML/CSS.
Salut, je viens de terminer ma L3 Info et effectivement je le savais, on le voit en UE de création numérique lors qu'on aborde les translations / relations suivant les axes ^^
Je connaissais pour les transforms.
Superbe vidéo (ENCORE)
top la vidéo
Je connaissais cette règle mais c'est plutôt connu pour la programmation 3d je ne savais pas que c'était appliqué aussi pour le CSS
Je suis tellement heureux ! Je connaissais déjà cette prop ! (J'avais eu un problème très similaire et en cherchant comment le résoudre, j'ai trouvé cette prop)
GG pour cette info Benjamin, merci 🤗
j'adore tes vidéo. je doit t'avouer que tu m'as appris un truc x) ^^
Dans le programme, on demandais aux premières (6ème pour les français) d'effectuer 2 transformations pour appliquer un segment à un autre. En général, la translation et rotation, car on peut très vite se rendre compte que l'ordre est important et ça place déjà les jalons pour les opérations non commutatives en dehors de la division et la soustraction.
Ça a disparu du programme, car trop compliqué. En plus, vu que chaque élève pouvait avoir une solution unique, ça rendait les corrections plus chaudes aussi. Bref, ça foutait le bordel.
Du coup, on se retrouve avec des gens qui n'ont jamais vu ça, tout ceux nés en 2000 ou après ^^
Le dénombrement a sauté aussi! Mais ça c'est plus récent et pas utilisé dans le CSS 🤣
Par contre, les règles ":nth-child(3n+2)" posent problème. Et sélectionner les 8 premiers éléments est encore plus problématique ^^
Pourtant, dès le première on présente les nombres pair et impairs avec 2n et 2n+1, mais pas suffisamment!
T Shirt Floodcast ouiiiiii
Aussi, je l'ai appris en trifouillant mon CSS psq une animation marchait pas comme elle devait, j'ai swap l'ordre et pouf ça a marché. Mais c'est vrai que c'est pas un truc auquel on pense forcément.
Dev fullstack (mais surtout back) nope du tout ! Il est toujours possible que j'ai appliqué ça sans m'en rendre compte, mais du coup je n'avais aucune connaissance sur ce fait avant ^^
Je suis formateur en Front et je l'ai découvert en donnant cours.. grâce aux différentes techniques employées par mes apprenants pour arriver à mon résultat,
Comme toi, j'ignorais cette subtilité au début de mon apprentissage 😅
Salut Benjamin je suis en autodidacte et je connaissais cette ordre sur le translate
J'ai fait des expériences sur mes projet en design (prototype) et j'en n'avait conclu que c'était comme ça pour faciliter la compréhension "c'est mon avis" voilà 😄
XD je savais pck j'ai eu un probleme du genre et je trouvais tellement pas de solution que qui je commençais a faire truc "insensé" comme inverser l'ordre dans le transforme et ca à marcher, c'est la que j'ai découvert toute la fourberie de cette commande
Merci pour l’info, on en apprend vraiment tous les jours !!!
Je connaissais pas, merci!
Je ne suis plutôt développeur client lourd (donc pas de CSS) et je trouve ça parfaitement normal que les transform s'effectuent dans l'ordre. Par contre ce qui me choque c'est que le rotate modifie le repère (x,y,z) et non pas uniquement les points de la figure géométrique (d'où le problème sur lequel tu es tombé). C'est quand même pas très pratique pour s'y retrouver à la sortie.
C'est comme ça dans tous les lagages. Il arrique que l'on ajoute aux fonctions de transformation matricielle un paramètre supplémentaire booléen pour indiquer que l'on souhaite appliquer l'inverse de la transformée sur l'origine de l'objet, mais ça n'a rien de naturel (car 2 opérations au lieu d'une). En l'occurrence ici, c'est le pivot que l'on déplace, l'objet ne fait qu'hériter de lui.
Je ne savais pas du tout, merci de l'info !!
Etant un amateur de p5js j'était déjà sensibilisé à l'ordre des choses concernant les rotate et translate. Je conseil vivement de s'amuser avec p5 pour mieux comprendre comment les ordinateurs dessinent
Ahah!! je le savais déjà depuis quelques années.. je l'avais découvert complètement par hasard en bricolant
l'ordre est important dans beaucoup de chose
les instructions sont de manières générales exécutées dans l'ordre (voir la call stack), c'est pareil pour les index composites des bases de données etc.
Stylé de ouf, gg a tout le monde ça devait vraiment pas être simple !
Je connaissais aussi, c’est un cas qui arrive assez vite quand on fait beaucoup de css
Je savais pas ce serait de te voir faire une vidéo avec le designer du web par ce que en front il est calé de ouf ca pourrait faire un challenge trop cool
Alors déjà gros big up pour le « Something About Us » a la guitare 👌
Ensuite je le savais pour l’ordre du transform mais dans mon métier je fais beaucoup d’animations SVG via javascript en utilisant transform donc 🙂
Je viens seulement de comprendre que c’était Something about us alors que c’est sûrement la musique que j’ai le plus écouté et que je regarde Benjamin depuis 2 ans 😅
J'avoue que non j'aurais pas pensé à l'ordre dans ce cas, je croyais que tu allais jouer sur le transform-origin 😇
Je ne sais pas que l'ordre a une grosse influence, comme dab j'apprends toujours quelque chose avec tes vidéo
Je savais pas, merci pour l'astuce !
Beaucoup de programme 3d fonctionne ainsi, sur 3 axes, la creation d'un objet et une rotation de cette objet change l orientation des autres axes. Ca me surprend qu'en css aussi.
Super astuce! bravo pour la video!
Je connaissais cette histoire d'ordre, je l'ai déjà lu plusieurs fois
Bonjour Benjamin,
Premièrement BIG UP à toi je loupe aucune vidéo. Je me lance dans le dev front alors que je suis graphiste 2D senior. Je galère beaucoup à comprendre la notion d’héritage du coup beaucoup de conneries apparaissent… ou pas d’ailleurs dans mon CSS je n’ai trouvé personne qui explique cela clairement alors que c’est la base des bases?
Merci à toi si tu vois ce message et lâche rien.
Une serie transformation c'est equivalent a un produit matriciel et le produit de 2 matrice n'est pas commutatif c'est l'explication
C'est quelque chose que j'ai appris en faisant du React Native (car le transform origin n'existe pas, on doit manipuler l'ordre des transform de ce fait)
je ne connaissais pas l'ordre pour le transform et ça va me permettre de résoudre pas mal de soucis en un rien de temps 😯
L'ordre des transformation est important et ne m'étonne pas.
Une transformation géométrique est un produit matriciel mathématiquement parlant.
Et pour les matheux un produit matricielle n'est pas commutatif.
En gros pour une matrice A et B (de dimensions compatible, admettons matrices carré de meme dimensions)
Le produit AxB et différents de BxA.
D'où, l'ordre des transformation est important 😅
Je suis actuellement en formation Front sur OCR et je savais que pour les animations certaines propriétés css agissent différemment en fonction de leur ordre :) Mais pour le coup je n'ai pas encore eu besoin de mixer translate et rotate 🤷♂️
Mais personnellement je pense que dans ce cas j'aurais utilisé un span en HTML avec ">" en texte, font size 26px ou 28px et la barre en content: " "; avec un système de width au hover 🤔
du coup avec l'ordre corrigé dans ton transform le translate3d peut juste être un translateX non ?
Je connais cette astuce à force de faire des animations 👍 si je n’étais pas tombé sur un post du forum de GSAP au moment où j’en avais besoin je serais encore entrain de rajouter des divs pour gérer les différents transform
bonjour .
moi je le savais.mais sait vrai que je me suis taper un cours sur les animation CSS et un projet dessus il y a pas lomgtemps.par contre je sait pas programme a l'aveugle .
la plupart du temps j'ai besoin de voir le résultat pour arrive au but final. voir change mon code complètement plusieurs fois pour y arrive .
et souvent quand je bloqué trops .je fait autre morceau de code et je y revient après et bien souvent une nuit de sommeil sa aide
Je savais pas perso, merci
Graphikart est exceptionnel
Je pensais que c'était un truc de malade mais oui je le savais merci pour ces challenges 😁
Je savais pas ;) Merci pour l'info et continue comme ça ;)
Pour le coup, oui je connaissais. J'ai déjà eu le problème avec un scale suivit d'un translate.
Je connaissais cette règle en rencontrant un soucis similaire !
Très bonne vidéo au passage !
Coucou, alors je le savais mais je n'utilise quasiment jamais de transform, en fait je fais même peu de front end, je suis un dev C++ et j'ai beaucoup fais de programmation graphique avec openGL donc en C++ et GLSL et du coup oui pour tout ce qui est opération matricielle l'ordre est super important (En général on fait scale, rotate et translate et d'ailleurs des fois ça peut être intéressant de translate avant de rotate si on veut deplacer plusieurs objet à distance équivalente du centre pour former une sorte de cercle en faisant des rotate à des angles différents) et ça vaut aussi ensuite pour les matrices de perspectives et de camera mais on sort du CSS
Pour les transfroms cela est du au fait que il se base sur l'origine de l'objet. si tu avait modifié l'origine de l'objet alors ca aurais pu fonctionné dans le premier sens
Bonjour, d'abord félicitation pour ta chaîne et tes vidéos sont juste top, j'ai essayer de refaire l'effet sur le bouton mais j'y arrive pas je bloque est-ce qu'il seraoit possible d'avoir de l'ai de ta part ou d'une personne qui te suit, pour info je débute dans le domaine merci pour tout.
Une dinguerie 😮
c'est pas un truc de base sur la géo 3D avec les multiplication de matrices ?
L'ordre des transfos, c'est la base ^^' On apprend ça la première fois qu'on utilise transform, en lisant la doc sur MDN..! Et je n'suis pas front :-/
Lourd je savais pas
Ça vient du fait que translate est une transformation affine, donc l'ordre est important (A*B != B*A chez les matrices)
Etonnant !
Pour apprendre l'ordonnancement des transform, pourquoi tu ferais pas se déplacer un pacman dans un labyrinthe... juste avec cette propriété :P ??
J'ai fait une formation de type "devenez développeur web en 3 mois", le truc bien pourri qui te sert finalement à une seule chose : t'en apprendre juste assez pour que tu puisses te rendre compte si ça t'intéresse ou pas... 😂
Mais je savais que les transform s'effectuaient l'un après l'autre, dans l'ordre dans lequel on les met, effectivement ^^
"GG à toi même si c'est éclaté" Je pense que c'est le plus beau des compliments
J'ai rigolé moi même en revoyant ce passage après le tournage ! Je suis le pire !
no joke mais je savais pour l'ordre car j'avais eu des galères en faisant un menu burger dont les barres se croisent pour faire une croix au hover :p
rotate toujours à la fin sinon les axes c'est ingérable
wow je t'aime !