99% des développeurs ignorent cette règle en CSS
HTML-код
- Опубликовано: 18 окт 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
![Gunna - HIM ALL ALONG [Official Visualizer]](http://i.ytimg.com/vi/HiCxoDeo0hc/mqdefault.jpg)
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
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)
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...
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 ;)
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.
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 !
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 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 ?
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
Je débute en web dev et je suis tout à fait surpris !! J'en apprends beaucoup avec tes vidéos, merci !!
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é
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 🥲
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.
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
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é 😄
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
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.
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
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 !
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.
Je suis en train de faire la formation Open Classroom Dev Front et dans le cours sur les animations c'est bien précisé !
Ah non je ne savais pas du tout... Merci pour la découverte !
très intéressant :) Maintenant que je deviens un dev front end, je vais être obligé de m'abonner :)
Oui je connais l'importance de l'ordre. Animation intéressante. Et je confirme que Lior Chamla est un super formateur.
trop fort ! je connaissais pas l'astuce ! merci
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.
Merci pour l’info, on en apprend vraiment tous les jours !!!
Merci pour l astuce !! Je ne connaissais pas !
Je suis encore en phase d'apprentissage, alors oui je savais que l'ordre était important mais pas sur rotate translate ! Super merci :)
je connaissais déjà le truc de l'ordre qui est important
Je connaissais cette histoire d'ordre, je l'ai déjà lu plusieurs fois
Ahah!! je le savais déjà depuis quelques années.. je l'avais découvert complètement par hasard en bricolant
Je ne savais carrément pas qu'il y avait un ordre ... merci pour l'info 👍
Je ne savais absolument pas.
Je connaissais pas, merci!
Je connaissais pour les transforms.
Superbe vidéo (ENCORE)
Je pensais que c'était un truc de malade mais oui je le savais merci pour ces challenges 😁
6:10 Je savais pas. Après j'fais plus souvent du back que du front :P
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
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 savais pas, merci pour l'astuce !
J'ai déjà eu le problème et je ne connaissais pas le tips ! Bien ouèj !
GG pour cette info Benjamin, merci 🤗
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.
Je ne savais pas du tout, merci de l'info !!
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 ;)
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
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 savais pas perso, merci
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 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.
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.
Génial, tu m'apprends un truc là :)
Stylé de ouf, gg a tout le monde ça devait vraiment pas être simple !
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.
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.
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 !
Graphikart est exceptionnel
Super astuce! bravo pour la video!
Je le savais clairement pas, merci pour l'info !
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)
}
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à
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 😅
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'info et continue comme ça ;)
Je connaissais aussi, c’est un cas qui arrive assez vite quand on fait beaucoup de css
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
Lourd je savais pas
Je ne savais pas , dinguerie
Une dinguerie 😮
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)
j'adore tes vidéo. je doit t'avouer que tu m'as appris un truc x) ^^
Je savais pas perso merci
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.
Merci pour l'astuce bg
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 😯
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)
Wawww j'aurais jamais cru que l'ordre avec un importance !!!
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
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
Je le connaissais déjà !
Ahaha j'étais absolument pas au courant mais ça paraît si logique en réalité
ha oui je connaissais ca l'ordre est toujours 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 🤔
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.
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à 😄
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
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
La multiplication de matrices n’est pas commutative. Les transforms sont des multiplications matricielles. Les maths sont partout 😆
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 savais pas mais en fait c'est logique quand tu te rends compte
"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 !
je savais mais je n'y aurais jamais pensé
wow je t'aime !
du coup avec l'ordre corrigé dans ton transform le translate3d peut juste être un translateX non ?
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.
Je connaissais déjà grâce aux cours d'OpenGL ^^
Je connaissais cette règle en rencontrant un soucis similaire !
Très bonne vidéo au passage !
J’avais appris que l’ordre était important lorsque j’avais testé plein de truc
Je le savais... Découvert en tâtonnant ! :P