Explication détaillée de l'attribut de transformation CSS3 et résumé de l'utilisation de la transformation

HTML5 et CSS3 se sont développés rapidement ces dernières années. Il existe de nombreux sites Web importants et sympas dans le pays et à l'étranger qui utilisent les dernières technologies. Les navigateurs de divers fabricants sont de plus en plus compatibles avec eux. Il existe un attribut puissant Transform en CSS3. Grâce à cette fonctionnalité, divers effets spéciaux peuvent être facilement obtenus. Pour citer une parole : « Tourner, sauter, je ne m'arrêterai pas ». Au sens littéral, Transform signifie transformation. Ses valeurs incluent principalement la rotation, l'inclinaison, l'échelle, la translation et la matrice de transformation matricielle. Le contenu suivant parlera de cette propriété importante en CSS3.

Tout d'abord, vous pouvez apprendre des cours gratuits liés au site Web PHP chinois

1 Regardez l'attribut de transformation dans "Tutoriel vidéo sur les effets spéciaux CSS3 3D".

2. Apprenez le

Tutoriel de transformation CSS3 dans "Tutoriel CSS3 du débutant à la maîtrise"

attribut de transformation

1. >À propos de Comment implémenter la transformation d'attribut de transformation plane 2D des éléments CSS3

La transformation de forme de CSS3 nous permet d'étirer, de mettre à l'échelle, etc. des éléments. Dans cet article, je parlerai principalement des éléments 2D. Transformation d'attribut de transformation de plan qui peut être transformée. Transform est un moyen de transformation et il est principalement utilisé via des fonctions. translation() Transformation de traduction ratate() Transformation de rotation scale() Transformation d'échelle skew() Transformation oblique matrice() Matrice. La règle de transformation transform-origin définit la transformation de translation centrale de la transformation

2

Introduction détaillée à l'attribut transform en CSS3 pour obtenir un centrage vertical et horizontal des divs avec une largeur et une hauteur variables

<.>La compatibilité de transform est relativement optimiste. Il n'est pas compatible sous IE9. IE9 prend en charge l'attribut alternatif -ms-transform mais ne prend en charge que la conversion 2D.

Google et Safari prennent en charge l'attribut alternatif -webkit-transform. IE9 et supérieur, Firefox et Open sont compatibles.

Je crois que dans les projets réels, vous rencontrerez certainement le problème de la largeur et de la hauteur variables de p, du centrage vertical et horizontal. Je me souviens que j'avais déjà utilisé js pour l'implémenter.

En fait, il existe plusieurs façons de l'implémenter avec CSS. Mais personnellement, je pense qu'il est plus simple et plus pratique d'utiliser la transformation, mais elle n'est pas compatible avec les navigateurs inférieurs à IE9.

3.

Exemples détaillés des différences entre les propriétés de transformation, de transition et d'animation dans CSS3

Dans certains cas de test, lorsque l'attribut transform est démontré, cela ressemble à Le tout avec animation. Cela fait penser à un petit nombre de personnes dotées d'une pensée intuitive que l'attribut de transformation est un attribut d'animation. Au contraire, l'attribut transform est un attribut statique. Une fois écrit dans le style, son effet sera affiché directement sans aucun processus de modification. L'objectif principal de la transformation est d'effectuer des déformations spéciales des éléments, ce qui n'est pas étranger aux concepteurs. En termes simples, il s'agit d'un outil de déformation graphique CSS.

4.

Introduction détaillée à l'attribut de transformation de transformation CSS

transform : Transformation

Rotation : rotation() : Degré

Biseau cut : skew(): degré

skew >scaleY

Déplacement : translate() : Toutes les unités prises en charge par CSS peuvent être utilisées

translateX

translateY

transform: scale(2) rotate(50deg); Effectuez d'abord la rotation, puis effectuez la mise à l'échelle

5

transform attribut en CSS

en CSS. La propriété transform vous permet de modifier l'espace de coordonnées d'un modèle visuel CSS. Grâce à la transformation, les éléments peuvent être déplacés (traduction), pivotés (rotation), mis à l'échelle (échelle) et inclinés (inclinaison).

Si cette propriété a une valeur autre que none, un contexte d'empilement sera généré. Dans ce cas l'objet fera office de bloc conteneur pour l'élément position:fixed qu'il contient.

6.

L'impact de la transformation CSS3 sur le flux de documents HTML

Après avoir ajouté l'attribut transform au corps (ou html), le corps entier du DOM subira les transformations correspondantes, mais le « tout » pour le moment ne fait référence qu'aux éléments de flux de documents standard sous le corps. / position : L'élément fixe, parce qu'il a été séparé du flux documentaire auquel appartient le corps, ne peut naturellement pas obtenir l'effet de transformation correspondant en s'appuyant sur la transformation du corps.

Questions et réponses connexes

1 Transformer Pourquoi deux éléments sont nécessaires pour créer un effet de défilement

.

2 . Pourquoi le display:block initial de la transformation de transition n'a-t-il aucun effet de mouvement ?

3. Comment la transformation CSS3 peut-elle réaliser une rotation centrale ?

[Recommandations associées]

1. Tutoriel vidéo gratuit sur le site Web php chinois : "php.cn Dugu Jiujian (2)-css video tutoriel"

2. Tutoriel vidéo gratuit pour site Web PHP chinois : Tutoriel vidéo CSS3 pour obtenir un effet de transition fluide sur les pages Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!