No video :(

Les nouvelles propriétés de transformation en CSS

Подписаться 61 тыс.

Просмотров 3,8 тыс.

50% 1

🎓 Formez-vous avec l'École du Web : www.ecole-du-w...
📚 Ou suivez mes cours sur UDEMY : liste-des-cour...
🚀 1 Cours gratuit en t'abonnant à ma newsletter :
www.le-designe...
--------------------------------------------------------------------------------------------
Rejoins la communauté pour partager et/ou obtenir de l’aide sur :
► Discord : / discord
Suis-moi également sur mes réseaux anglophones :
► RU-vid : / thewebschool
❓ Si tu veux que je fasse une vidéo sur un sujet en particulier, dis-le moi dans les commentaires !

Опубликовано:

28 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 31

@pixabois9594 3 месяца назад

Super merci pour cette mise à jour, j'ai complété la documentation de votre formation "Le CSS de A à Z. Cette documention VS code facilite vraiment beaucoup merci

@sprichie2 3 месяца назад

Excellente nouvelle et en effet beaucoup plus simple ! Merci pour les explications, c'est très clair 👍

@ApplleGS4 4 месяца назад

Comme d’habitude au top merci

@primieralex24 15 дней назад

Je suis la

@LudovicFontaine-lb9cy 4 месяца назад

Je me suis toujours demandé pourquoi ce n'était pas comme ça depuis le début ^^

@EcoleduWeb 4 месяца назад

Écris tes suggestions au W3C ! Ça ferait beau sur ton CV d'être à l'origine d'une propriété ou d'une valeur. 😎

@LudovicFontaine-lb9cy 4 месяца назад

@@EcoleduWeb ahah oui 😂

@borisboulogne5163 3 месяца назад

Bonjour Enzo, tout d’abord merci d’exister, Toutefois j’ai une question concernant transform-origin, j’ai testé un peu et à moins d’avoir mal fait, je ne sais pas comment changer l’origine d’un scale(0.6) en bottom center sur un élément par exemple, j’ai cherché très rapidement mais je n’ai rien trouvé et j’ai dû revenir au transform fondamental, aurais-tu une astuce ?

@EcoleduWeb 3 месяца назад

Merci pour ton soutien ! Et si, on peut changer l'origine de transformation avec les props individuelles. Exemple : .element { padding: 50px; width: 200px; background-color: red; transform-origin: bottom right; transform: scale(1.2); } Si tu copies ça sur Codepen, et que tu changes la valeur de scale, tu verras que ça part du bas-droit.

@nikkhah_ali 3 месяца назад

which font do you use ?

@tsuhak4697 4 месяца назад

Bonjour, je voulais savoir si ces nouvelles propriétés était disponible en js. Merci pour cette vidéo

@EcoleduWeb 4 месяца назад

Oui, par exemple : console.log(window.getComputedStyle(document.querySelector('.box')).scale)

@RaphaelRonaldoRR7 3 месяца назад

Salut pour ma part cela ne fonctionne pas et je ne trouve aucune docs à ce sujet sauf ici c'est un peut bizarre sachant que j'ai essayé sur quatre navigateur.

@EcoleduWeb 3 месяца назад

Tu as dû faire une erreur de syntaxe quelque part. Doc : developer.mozilla.org/en-US/docs/Web/CSS/translate

@searchingmurphy 4 месяца назад

😂 J'ai tout avalé d'un coup en 80h plus sass css (scss)... oui c'etait dingue.

@EcoleduWeb 4 месяца назад

Bravo ! Mais il faut prendre des vacances maintenant aha

@searchingmurphy 4 месяца назад

@@EcoleduWeb pas encore, après un debug et un gros site, j'aurai fini mon année d'étude et ce sera le debut des scrapers avec des webhooks mais ça c'est après .

@ne92_974 4 месяца назад

Bonjour comment il faut faire pour que la page se recharge toute seule quand on fait une modification dans le code CSS ou HTML ?

@EcoleduWeb 4 месяца назад

Il faut activer l’auto save de VSCODE

@ne92_974 4 месяца назад

@@EcoleduWeb et pour Google , j'ai remarqué que vous ne rafraîchissez pas la page manuellement mais que c'était automatique

@SlyRaider 4 месяца назад

Il faut utiliser l'extension Live Server sur VS Code (couplée à l'auto-save). Une fois dans un dossier de travail et sur le fichier HTML, on peut lancer le serveur en bas à droite. Le navigateur se mettra à jour automatiquement. 🙂

@yaomialami7144 3 месяца назад

J’ai essayé de faire enregistrer ton cours sur youtube,pour le regarder après,mais j’ai une mauvaise qualité video.pourquoi ?

@EcoleduWeb 3 месяца назад

Je ne suis pas le propriétaire de RU-vid

@yaomialami7144 3 месяца назад

@@EcoleduWeb c drole,bien sur t’es pas le propr ytb,je me demande si vous avez restreint la lecture hors connexion via des clauses de distribution sur ytb

@soren2859 4 месяца назад

Force. Tu as des bots dans tes coms !

@EcoleduWeb 4 месяца назад

Ils sont là en effet 🤖

@lmz-dev 4 месяца назад

Le bons utilisent matrix(a, b, c, d, tx, ty) et les meilleurs utilisent matrix3d(...) 😎

@EcoleduWeb 4 месяца назад

😁

@lmz-dev 4 месяца назад

@@EcoleduWeb Bah t'a pas le choix quand tu veux récupérer les coordonnées internes du pointer dans un élément. Evt.offsetX et offsetY retournent les bonnes coordonnées locales seulement lorsque tu survoles l'élément. Dès que tu sors, tu n'as plus que les coordonnées globales :(

@EcoleduWeb 4 месяца назад

@@lmz-dev Hm je n'ai pas vraiment compris, mais les problèmes soulevés dans la vidéo ont également lieu avec une matrice créée avec transform.

@lmz-dev 4 месяца назад

@@EcoleduWeb Ha bah forcément, la matrice est le résultat dans l'ordre des transformations. Ce que je veux dire, c'est que si tu dois déplacer un élément dans une boite déformée, il faut récupérer la matrice (element.style.transfrom) et multiplier les coordonnées de la souris à l'écran par l'inverse de la matrice pour obtenir les coordonnées internes... sans parler de la perspective ! Mais c'est pas le sujet, on est d'accord ;p