Compagnon de code
CSS : l'essentiel, avec style !
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Transformer des éléments ?
Et oui, un élément peut évoluer, se modifier, se tranformer !
Plus petit, plus grand ?
Plus à droite, plus bas ?
Regardons ce qui est réalisable !
La proriété "transform" peut donc contenir elle même des propriétés avec des valeurs variables
Par exemple :
.box {
transform : scale(2);
}
Pour agrandir un objet de 2x sa taille initale.
Les autres propriétés communes sont :
| Propriétés | Effet |
translateX(valeur en px, vw, vh, %) |
pour une tranlation horizontale |
translateY(valeur en px, vw, vh, %) |
pour une tranlation verticale |
translate(x, y) |
pour une tranlation sur les 2 axes |
scale(valeur) |
pour un agrandissement ou un rétrécissement, 1 est la valeur de base |
rotate(valeur deg) |
pour une rotation de l'élément. |
Les propriétés sont cumulables !
.box {
transform : scale(2) rotate(135deg);
}
D'autres propriétés existent, mais avec celles-ci, vous aurez déjà de quoi mettre en place au moins 90% de vos idées !
Pensez à la propriété transform-origin qui permet d'effcetuer une rotation par exemple à partir d'un point donné de l'élément
et pas forcément deson centre !
Écrit en 02/25 par Christophe C.
Mis à jour en 02/25