How to implement rotation on the horizontal axis in CSS3 (code attached)-CSS Tutorial-php.cn

How to implement rotation on the horizontal axis in CSS3 (code attached)

不言

Release： 2018-11-07 15:49:38

Original

2653 people have browsed it

Using CSS3 it is possible to rotate a DOM element in three dimensions on its horizontal/vertical axis. This article will share with you how to achieve rotation on the horizontal axis in CSS3. Friends who are interested can take a look

Let’s go directly to the text

The HTML code is:

<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>

Copy after login

The CSS code is:

.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*/
    }

Copy after login

The important features to note are transition: all 0.4s linear; | transform-style: preserve-3d; | transform: rotateX (180deg ); | backface-visibility: hidden;..

The above is the detailed content of How to implement rotation on the horizontal axis in CSS3 (code attached). For more information, please follow other related articles on the PHP Chinese website!