Déformation tridimensionnelle CSS3 pour réaliser un carré tridimensionnel-tutoriel CSS-php.cn

Déformation tridimensionnelle CSS3 pour réaliser un carré tridimensionnel

不言

Libérer： 2018-06-28 10:51:23

original

2939 Les gens l'ont consulté

Cet article vous présente principalement la méthode CSS3 d'utilisation de la déformation tridimensionnelle pour réaliser des blocs tridimensionnels. L'article donne un exemple de code complet. Les amis intéressés peuvent l'exécuter eux-mêmes et voir l'effet. vous vous améliorez. Jetons un coup d’œil à l’apprentissage ci-dessous.

Préface

Les transformations tridimensionnelles utilisent les mêmes propriétés basées sur les transformations bidimensionnelles. Si vous êtes familier avec les transformations bidimensionnelles, vous constaterez que les fonctions de transformations 3D et 2D fonctionnent de la même manière. La plus grande différence entre la déformation 3D et la déformation 2D est que les axes de coordonnées de référence sont différents. Les axes de coordonnées de la déformation 2D sont plans, avec uniquement les axes X et Y, tandis que les axes de coordonnées de la déformation 3D sont composés de trois axes : X, Y. , et Z. Dans l'espace tridimensionnel, la direction positive de l'axe X est vers la droite, la direction positive de l'axe Y est vers le bas et la direction positive de l'axe Z est vers l'extérieur du écran.

Le rendu statique est le suivant :

Exemple de code

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>CSS3三维变形</title>
        <!--  -->
        <style type="text/css">
         * {
          margin: 0;
          padding: 0;
         }
         
         .box {
          position:relative;
          top: 100px;
          width:300px;
          height: 300px;
          margin: 0 auto;
          background-color: #ccc;
          /*
           透视效果
           越大透视距离越平面，反之亦然
          */
          perspective:800px;
         }
         .content {
          /*3d视图*/
          transform-style: preserve-3d;
          /*过度动画*/
          transition: all 3s linear;
          width:200px;
          height: 200px;
          position: absolute;
          top: 50px;
       left: 50px;
         }
         /*
          经过顺时针旋转
         */
         .content:hover {
          transform: rotateX(180deg) rotateY(180deg);
         }
         /*
          方块公共样式
         */
         .side {
          position: absolute;
       height: 200px;
       width: 200px;
       border: 2px solid #000;
       background: rgba(0,0,0,0.3);
       color: #fff;
       line-height: 200px;
       font-size: 30px;
       font-weight: bold;
       text-align: center;
       text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
         }
         /*
          前
         */
         .side1 {
           transform: translateZ(100px);
         }
         /*
          后
         */
         .side2 {
          transform: rotateX(180deg) translateZ(100px);
         } 
         /*
          左
         */
         .side3 {
          transform: rotateY(-90deg) translateZ(100px);
         }
         /*
          右
         */
         .side4 {
          transform: rotateY(90deg) translateZ(100px);
         }
         /*
          上
         */
         .side5 {
          transform: rotateX(90deg) translateZ(100px);
         }
         /*
          下
         */
         .side6 {
          transform: rotateX(-90deg) translateZ(100px);
         }
        </style>
    </head>
    <body>
     <!-- begin -->
     <p class="box">
      <p class="content">
       <p class="side side1">1</p>
             <p class="side side2">2</p>
             <p class="side side3">3</p>
             <p class="side side4">4</p>
             <p class="side side5">5</p>
             <p class="side side6">6</p>
      </p>
     </p>
     <!-- end -->
    </body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de l'utilisation de la bordure d'image CSS3 border-image

Environ 20 animations de chargement produites par CSS3 Effet

À propos de la méthode de dessin des hexagones en CSS3

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!