Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 558|回复: 0

css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-5-16 15:26:42 | 显示全部楼层 |阅读模式

     主要知识点:rotate旋转以及  outline透明的像素消除(明显降低)火狐旋转是产生的 锯齿 

     

    首先看结构:

    1    <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">
    2       <a href="brandLi.html" class="flipper">
    3           <div class="front">前面</div>
    4           <div class="back" >后面</div>
    5       </a>
    6    </li>

    结构上没啥特别的,注意 里面的 frontback 用绝对位置;以防出现问题

    直接用 HTML5 API里:classList

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,也可以用它来判断某个节点是否被赋予了某个CSS类;

    {
        length: {number}, /* # of class on this element */
        add: function() { [native code] },
        contains: function() { [native code] },
        item: function() { [native code] }, /* by index */
        remove: function() { [native code] },
        toggle: function() { [native code] }
    }

     

    还有一个小问题,就是旋转时候,哪怕不旋转 单独设置 -moz-transform:  rotateY(30deg); 火狐浏览器下面  元素边缘锯齿问题比较明显注意firebug 调试 outline属性

     

    上诉图片 蓝色的 设置了起始旋转30度,火狐下明显有锯齿。别的浏览器没有很仔细的观察,这是加个属性  outline:1px solid transparent;

    <div class="front " style="outline:1px solid transparent;background:blue; color:#fff;  -moz-transform:  rotateY(30deg);overflow:hidden;">前面  针对火狐 outline:1px solid transparent用于消除锯齿</div>

     

     

    另外 ,总感觉好像哪里不协调;如果仔细观察,会发现网上的某些3D翻转效果和我上边的例子的效果有些不同。如果你使用右边为轴进行翻转,你会发现卡片会翻出容器之外。这不仅仅是翻转了卡片,还使卡片的的边从右边移动到了左边; 要针对处理 transform-origin: right center; 以及水平位移的距离 transform: translateX( -100% ) rotateY( -Xdeg ); 下面代码中没有优化; 360 浏览器支持的不是很好

     

     

     

    下面附上代码:

      1 <!doctype html>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <title>css3 翻牌  以及css3边缘锯齿问题</title>
      6 </head>
      7 
      8 <body>
      9 <style>
     10 *{ margin:0; padding:0;}
     11 ul,li{ list-style:none; margin:0; padding:0;}
     12 
     13 
     14 .brandsShow{ width:1200px; height:620px; margin:0 auto;  }
     15 .brandsShow ul{ margin-left:-20px; width:1225px; height:auto;  }
     16 .brandsShow ul li{ float:left; display:inline; width:283px; height:424px;  }
     17 
     18 .flip-container {perspective: 1000;
     19     -webkit-perspective: 1000px;    /*父类容器中  perspective  子类允许透视*/
     20     -moz-perspective: 1000px;
     21     -ms-perspective: 1000px;
     22     -o-perspective: 1000px;
     23      perspective: 1000px;
     24      margin:0px auto; 
     25      float:left; margin-left:20px; margin-bottom:20px; border:1px solid #333;
     26      }
     27  
     28 
     29 .flip-container, .front, .back {width: 283px;height: 424px;}
     30 
     31 .front, .back {
     32     backface-visibility: hidden; 
     33     overflow:hidden;
     34     -webkit-transition: .8s ease-out;
     35     transition: .8s ease-out;
     36   -webkit-transform-style: preserve-3d;  /* 子类保留3d动画结果*/
     37    -moz-transform-style: preserve-3d; 
     38    -ms-transform-style: preserve-3d;
     39    -o-transform-style: preserve-3d;
     40    transform-style: preserve-3d;
     41    position: absolute;top: 0;left: 0; /*动画元素最好绝对位置*/
     42    }
     43 
     44 .front img, .back  img{ width:283px; height:424px; }
     45 
     46 .front {z-index: 2; /*起始设置层  hover时候改变*/
     47 -webkit-transform: rotateY(0deg);
     48 -moz-transform: rotateY(0deg);
     49 -ms-transform:  rotateY(0deg);
     50 -o-transform:  rotateY(0deg);
     51 transform: rotateY(0deg);
     52 }
     53 
     54 .back { z-index:1;/*起始设置层  hover时候改变*/
     55 -webkit-transform: rotateY(-180deg);
     56 -moz-transform: rotateY(-180deg);
     57 -ms-transform:  rotateY(-180deg);
     58 -o-transform:  rotateY(-180deg);
     59 transform: rotateY(-180deg);
     60 }
     61 
     62 
     63 
     64 .flipper {
     65       -webkit-transition: transform .8s ease-in-out;
     66       -moz-transition: transform .8s ease-in-out;
     67       -ms-transition: transform .5s ease-in-out;
     68       -o-transition: transform .5s ease-in-out; 
     69       transition: transform .5s ease-in-out;
     70 
     71       -webkit-transform-style: preserve-3d;  /*使其子类变换后得以保留 3d转换后的位置*/
     72       -moz-transform-style: preserve-3d;
     73       -ms-transform-style: preserve-3d;
     74       -o-transform-style: preserve-3d;
     75       transform-style: preserve-3d; 
     76       display:block;position: relative;
     77      }
     78       
     79    
     80 .flip-container:hover .back {
     81      -webkit-transform: rotateY(0deg);
     82      -moz-transform:  rotateY(0deg);
     83      -ms-transform:  rotateY(0deg);
     84      -o-transform:  rotateY(0deg);
     85      transform: rotateY(0deg);
     86       z-index:2; 
     87       }
     88       
     89 .flip-container:hover .front { 
     90       -webkit-transform: rotateY(180deg);
     91       -moz-transform: rotateY(180deg);
     92       -ms-transform:  rotateY(180deg);
     93       -o-transform:  rotateY(180deg); 
     94       transform: rotateY(180deg);
     95       z-index:10;
     96       }
     97 
     98 
     99 </style>
    100 
    101 
    102  <ul style=" margin-top:30px;">
    103     <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">
    104       <a href="brandLi.html" class="flipper">
    105       <div class="front "  style="outline:1px solid transparent; overflow:hidden"><img src="../images/TaylorSwift.jpg">前面</div>
    106       <div class="back " ><img src="../images/ameriancaptain.jpg">后面</div>
    107       </a>
    108    </li>
    109     
    110    <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">
    111      <a href="brandLi.html" class="flipper">
    112     <div class="front " style="outline:1px solid transparent;background:blue; overflow:hidden; color:#fff;">前面  针对火狐 outline:1px solid transparent用于消除锯齿</div>
    113     <div class="back " style="outline:1px solid transparent;background:#333; color:#fff">后面</div>
    114     </a>
    115    </li>
    116   </ul>
    117 
    118 </body>
    119 </html>

     顺便提一句:

    1,ie 6 , ie7 js也是支持rotate() 的;不过运动中心默认不是 transform-origin:center center;需要js修正;

    2,transform属性:skew,rotate,translate 等其实归更到底都是通过matrix矩阵变换实现的;

    下面说明   matrix的属性

     

    本文地址:http://www.cnblogs.com/surfaces/

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2025-1-23 12:13 , Processed in 0.065614 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表