CSS3实现水平轴上旋转的方法

CSS3实现水平轴上旋转的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

创新互联建站主营平阴网站建设的网络公司,主营网站建设方案,app软件开发公司,平阴h5小程序开发搭建,平阴网站营销推广欢迎平阴等地区企业咨询

HTML代码是：

 

    

        

          
Barack
          
5397
        
    
    

        
Honolulu
August 4, 1961
    
  

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;.。

感谢各位的阅读！看完上述内容，你们对CSS3实现水平轴上旋转的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。