Partage de données vidéo d'effets spéciaux CSS3 3D

CSS est une feuille de style en cascade. L'utilisation de la technologie des feuilles de style en cascade lors de la création de pages Web permet d'obtenir un contrôle plus précis de la mise en page, des polices, des couleurs, des arrière-plans et d'autres effets de la page.

CSS3 est une version améliorée de la technologie CSS, et le développement du langage CSS3 évolue vers la modularisation. La spécification précédente était trop volumineuse et complexe en tant que module, elle a donc été divisée en modules plus petits et davantage de nouveaux modules ont été ajoutés. Ces modules incluent : modèle de boîte, module de liste, méthode de lien hypertexte, module de langue, arrière-plan et bordure, effets de texte, mise en page multi-colonnes, etc.

"Tutoriel vidéo sur les effets spéciaux 3D CSS3" utilise l'attribut de transition, l'attribut de perspective et l'attribut de transformation en CSS3 pour créer des effets tridimensionnels réels et utilisables.

Adresse de lecture vidéo : http://www.php.cn/course/416.html

Ceci Difficultés dans l'apprentissage vidéo

1. Sens de rotation et d'inclinaison

Pour les changements de rotation et d'inclinaison, le plus important est leur sens de transformation par défaut.

Pour la transformation par rotation, la valeur par défaut est d'effectuer une transformation dans le sens des aiguilles d'une montre le long de la direction positive de l'axe de référence (déterminée par la méthode de rotation utilisée, par exemple : l'axe de référence de rotateX() est l'axe X). Considérez le plan entouré par la bordure noire dans la figure ci-dessus comme un élément, avec l'axe X comme axe de référence à ce moment, si l'élément pivote (+) 30°, le plan noir est fixé sur le X- ; L'axe Y est dans la direction positive. Soulevez un côté vers le haut (tout comme soulever une planche de bois, la planche de bois soulevée est toujours dans un plan et ne se pliera pas comme si vous tourniez un livre). La même chose s'applique à rotateY(). rotateZ() est équivalent à la méthode rotate() de transformation 2D, qui consiste à faire pivoter l'élément dans le sens des aiguilles d'une montre.

rotatex

rotatey

rotatez

Pour la transformation d'inclinaison, les directions des axes X et Y sont opposées. skewX() incline le côté vertical de l'élément dans le sens inverse des aiguilles d'une montre (c'est-à-dire vers la gauche), tandis que skewY() incline le côté horizontal de l'élément dans le sens des aiguilles d'une montre (c'est-à-dire vers le bas).

skewx

skewy

2. Point de base de la transformation, point de vue et distance de visualisation

Par défaut, le point de base de la transformation CSS3 est le point central de l'élément, c'est-à-dire : Après transformation (uniquement rotation, inclinaison et mise à l'échelle), les coordonnées du point central de l'élément restent inchangées. Par exemple : la position initiale de l'élément coïncide avec le coin supérieur gauche de l'écran, et la largeur et. la hauteur est toutes deux de 100 px. Après une rotation de 30°, les coordonnées du point central de l'élément sont toujours ( 50,50).

Le point de vue est un autre point de base, qui n'est utilisé que pour la transformation 3D. Pour comprendre la perspective, vous pouvez utiliser la pensée perspective. Nous devrions tous avoir une impression de ce jeu : "Deux lignes droites parallèles se coupent à l'infini". Il est impossible que des lignes droites dans un espace tridimensionnel se croisent, même à l'infini. Cependant, lorsqu'elles sont projetées dans l'œil humain, les lignes droites initialement parallèles continueront à se rapprocher jusqu'à ce qu'elles se croisent en un point en raison du phénomène de « perspective ». .

Cependant, le point de vue n'est pas l'intersection des lignes. Le point de vue dans l'image ci-dessus se trouve en fait sur la surface la plus extérieure du plan, c'est-à-dire sur la surface où le cube du milieu se précipite vers l'extérieur du plan. écran. Le principe du point de vue de CSS est le même : il simule simplement la façon dont l'élément peut être vu lorsque l'œil humain se trouve à une certaine position, c'est-à-dire qu'il peut ressembler à un cube à différentes positions dans l'image ci-dessus. au "point de vue", il présentera différentes surfaces aux gens, le point de vue est un attribut utilisé pour simuler cette présentation tridimensionnelle des éléments.

Et un autre attribut qui doit être mentionné est la distance de visibilité. Comme son nom l’indique, la distance de visualisation est la distance entre un objet et le point de vue. Selon le principe de la « perspective », les objets apparaîtront grands à l'horizon et petits à l'horizon. Lorsque l'élément est suffisamment proche et suffisamment grand pour bloquer l'œil humain, les gens ne peuvent pas voir d'autres choses ; il paraîtra très lumineux, petit, voire invisible. L'attribut perspective doit être "mangé" en conjonction avec la méthode translateZ(), en définissant la perspective pour l'élément parent, et en même temps, en appliquant la méthode translateZ() à l'élément enfant, c'est-à-dire : l'élément parent est utilisé pour simuler la position de l'œil humain, et l'élément enfant est l'objet que vous souhaitez voir. Lorsque la méthode TranslateZ() n'est pas appliquée à l'élément enfant, elle équivaut à TranslateZ(0), et l'élément affiche sa taille d'origine, plus la distance de traduction est proche de la distance de visualisation (sans la dépasser), plus l'élément est grand ; apparaît ; sinon, plus il apparaît ; et lorsque la distance de translation dépasse la distance de visualisation, l'élément disparaît, ce qui équivaut à l'objet courant derrière l'œil humain et naturellement invisible. Le principe de fonctionnement de la perspective est d'utiliser la taille d'origine définie par l'élément comme taille de l'élément à la distance de visualisation. Par conséquent, l'élément deviendra plus grand d'une distance de translation (+) ; -) distance, mais elle doit être Valable uniquement lorsque la distance de visibilité est définie.

De plus, comme le montre la vue en perspective ci-dessus, les objets dans différentes positions auront un aspect différent. En CSS, pour obtenir cet effet, vous pouvez définir la distance de vue de l'élément parent, puis appliquer des transformations à plusieurs éléments enfants.

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!