So implementieren Sie die Drehung um die horizontale Achse in CSS3 (Code im Anhang)

Mit CSS3 ist es möglich, ein DOM-Element dreidimensional um seine horizontale/vertikale Achse zu drehen. In diesem Artikel erfahren Sie, wie Sie die Drehung auf der horizontalen Achse in CSS3 implementieren. Interessierte Freunde können einen Blick darauf werfen

Gehen wir direkt zum Text

Der HTML-Code lautet:

<div id="obama" class="f2_container">
 <div class="f2_card shadow">
    <div class="front2 face2">
        <dl>
          <dt class="label">Barack</dt>
          <dd class="amount">5397</dd>
        </dl>
    </div>
    <div class="back2 face2 center2">
        <p>Honolulu<br>August 4, 1961</p>
    </div>
  </div>
</div>

Der CSS-Code lautet:

.f2_container{
      position: relative;
      width: 140px;
      height: 80px;
      z-index: 1;
      -webkit-transition: all 0.4s linear;  /* Saf3.2+, Chrome */
         -moz-transition: all 0.4s linear;  /* FF4+ */
           -o-transition: all 0.4s linear;  /* Opera 10.5+ */
              transition: all 0.4s linear;
      perspective: 1000;
      -webkit-perspective: 1000;  /* Saf4+, Chrome 12+ */ 
         -moz-perspective: 1000;  /* FF10+ */
          -ms-perspective: 1000;  /* IE10+ */
              perspective: 1000;     
    }
    .f2_card {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: all 0.4s linear;  /* Saf3.2+, Chrome */
         -moz-transition: all 0.4s linear;  /* FF4+ */
           -o-transition: all 0.4s linear;  /* Opera 10.5+ */
              transition: all 0.4s linear;
    }
    .f2_container:hover .f2_card  {
      -webkit-transform: rotateX(180deg);
         -moz-transform: rotateX(180deg);
          -ms-transform: rotateX(180deg);
              transform: rotateX(180deg);
    }
    .face2 {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      display: block;
    }
    .face2.back2 {
      display: block;
      -webkit-transform: rotateY(180deg);
         -moz-transform: rotateY(180deg);
          -ms-transform: rotateY(180deg);
              transform: rotateY(180deg);
      -webkit-box-sizing: border-box; /* prev iOS4, prev Android  2.3 */
         -moz-box-sizing: border-box; /* FF1+ */
              box-sizing: border-box; /* Chrome, IE8, Opera, Safari 5.1*/
    }

Die wichtigsten zu beachtenden Funktionen sind Transition: all 0.4s linear; 180 Grad ); | Rückseite-Sichtbarkeit: versteckt;..

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Drehung um die horizontale Achse in CSS3 (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!