99% des développeurs ignorent cette règle en CSS
HTML-код
- Опубликовано: 2 апр 2022
- 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
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 ;)
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.
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
trop fort ! je connaissais pas l'astuce ! merci
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
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 débute en web dev et je suis tout à fait surpris !! J'en apprends beaucoup avec tes vidéos, merci !!
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 ;)
Merci pour l astuce !! Je ne connaissais pas !
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
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 ?
GG pour cette info Benjamin, merci 🤗
Super astuce! bravo pour la video!
Je connaissais pour les transforms.
Superbe vidéo (ENCORE)
j'adore tes vidéo. je doit t'avouer que tu m'as appris un truc x) ^^
Merci pour l’info, on en apprend vraiment tous les jours !!!
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 déjà eu le problème et je ne connaissais pas le tips ! Bien ouèj !
Je connaissais pas, merci!
Je savais pas, merci pour l'astuce !
Ah non je ne savais pas du tout... Merci pour la découverte !
Je savais pas ;) Merci pour l'info et continue comme ça ;)
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é
Je ne savais pas du tout, merci de l'info !!
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)
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 :)
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.
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
Stylé de ouf, gg a tout le monde ça devait vraiment pas être simple !
Je ne savais carrément pas qu'il y avait un ordre ... merci pour l'info 👍
Je connaissais cette règle en rencontrant un soucis similaire !
Très bonne vidéo au passage !
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.
Je le savais clairement pas, merci pour l'info !
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
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.
Oui je connais l'importance de l'ordre. Animation intéressante. Et je confirme que Lior Chamla est un super formateur.
Merci pour l'astuce bg
Je savais pas perso, merci
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
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 pensais que c'était un truc de malade mais oui je le savais merci pour ces challenges 😁
Une dinguerie 😮
Lourd je savais pas
Je suis en train de faire la formation Open Classroom Dev Front et dans le cours sur les animations c'est bien précisé !
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
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 ;)
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 pas un truc de base sur la géo 3D avec les multiplication de matrices ?
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 🥲
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 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 connaissais déjà le truc de l'ordre qui est important
du coup avec l'ordre corrigé dans ton transform le translate3d peut juste être un translateX non ?
6:10 Je savais pas. Après j'fais plus souvent du back que du front :P
Je le connaissais déjà !
Je savais pas perso merci
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à 😄
Ahah!! je le savais déjà depuis quelques années.. je l'avais découvert complètement par hasard en bricolant
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 !
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.
wow je t'aime !
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 😯
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 ne savais pas , dinguerie
Je ne sais pas que l'ordre a une grosse influence, comme dab j'apprends toujours quelque chose avec tes vidéo
Je connaissais cette histoire d'ordre, je l'ai déjà lu plusieurs fois
Sans le savoir, rajouter un translate y de 30 px ça aurais pas corriger le truc ?
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.
La multiplication de matrices n’est pas commutative. Les transforms sont des multiplications matricielles. Les maths sont partout 😆
Je connaissais déjà ^^
Je ne suis pas à la pointe sur tout mais pour une fois je connaissais l'astuce :)
Je connaissais aussi, c’est un cas qui arrive assez vite quand on fait beaucoup de css
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)
}
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
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 le savais... Découvert en tâtonnant ! :P
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 😅
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 ^^
Ahaha j'étais absolument pas au courant mais ça paraît si logique en réalité
thx
Je l’ignorais totalement, c’est incroyable !
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.
Je connaissais déjà grâce aux cours d'OpenGL ^^
Merci MDR, j'ai scotché mon prof ^^'
Hihi, j'avais déjà eu le souci oui😊
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.
J'avoue que non j'aurais pas pensé à l'ordre dans ce cas, je croyais que tu allais jouer sur le transform-origin 😇
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.
Wawww j'aurais jamais cru que l'ordre avec un importance !!!
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
je ne savais pas !
Yes je connaissais cette importance de l'ordre mais clairement c'est à force de tenter de corriger des comportements chelous que tu t'en rends compte 😀
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!
Ça j'le savais 😃