communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Français

Maison > interface Web > tutoriel CSS > Propriété d'origine de la perspective CSS

Propriété d'origine de la perspective CSS

PHPz

Libérer： 2023-09-14 13:49:10

avant

1034 Les gens l'ont consulté

CSS 透视图原点属性

Utilisez l'attribut perspective-origin pour spécifier la position inférieure de l'élément 3D.

Vous pouvez essayer d'exécuter le code suivant pour implémenter la propriété perspective-origin :

Exemple

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
        .demo1 {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: yellow;
            perspective: 80px;
            margin: 50px;
            perspective-origin: left;
         }
         .demo2 {
            position: absolute;
            padding: 20px;
            background-color: orange;
            transform-style: preserve-3d;
            transform: rotateX(45deg);
         }
      </style>
   </head>

   <body>
      <h1>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo</div>
      </div>
   </body>
</html>

Copier après la connexion

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!

Article précédent：Faire pivoter le div et incliner l'axe X à l'aide de CSS Article suivant：Comment est calculé le score de spécificité CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur