欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

CSS3如何实现水平轴上的旋转(附代码)

发布时间:2019-05-24  编辑:杨雨个人博客网站   点击:   

使用CSS3可以以三维方式在其水平/垂直轴上旋转DOM元素。本篇文章就给大家来分享关于CSS3实现在水平轴上旋转的方法,有感兴趣的朋友可以看一看

我们直接进入正文

HTML代码是:

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

CSS代码是:

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

需要注意的重要特性是transition: all 0.4s linear; | transform-style:preserve-3d; | transform:rotateX(180deg); | backface-visibility: hidden;.。 本文地址:http://itbyc.com/web/css3/20109.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1