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

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

首先看结构：

    <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">

       <a href="brandLi.html" class="flipper">

           <div class="front">前面</div>

           <div class="back" >后面</div>

       </a>

    </li>

结构上没啥特别的，注意里面的 front 和back 用绝对位置；以防出现问题

直接用 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 浏览器支持的不是很好

下面附上代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>css3 翻牌  以及css3边缘锯齿问题</title>

 </head>

 <body>

 <style>

 *{ margin:0; padding:0;}

 ul,li{ list-style:none; margin:0; padding:0;}

 .brandsShow{ width:1200px; height:620px; margin:0 auto;  }

 .brandsShow ul{ margin-left:-20px; width:1225px; height:auto;  }

 .brandsShow ul li{ float:left; display:inline; width:283px; height:424px;  }

 .flip-container {perspective: 1000;

     -webkit-perspective: 1000px;    /*父类容器中  perspective  子类允许透视*/

     -moz-perspective: 1000px;

     -ms-perspective: 1000px;

     -o-perspective: 1000px;

      perspective: 1000px;

      margin:0px auto;

      float:left; margin-left:20px; margin-bottom:20px; border:1px solid #333;

      }

 .flip-container, .front, .back {width: 283px;height: 424px;}

 .front, .back {

     backface-visibility: hidden;

     overflow:hidden;

     -webkit-transition: .8s ease-out;

     transition: .8s ease-out;

   -webkit-transform-style: preserve-3d;  /* 子类保留3d动画结果*/

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    transform-style: preserve-3d;

    position: absolute;top: 0;left: 0; /*动画元素最好绝对位置*/

    }

 .front img, .back  img{ width:283px; height:424px; }

 .front {z-index: 2; /*起始设置层  hover时候改变*/

 -webkit-transform: rotateY(0deg);

 -moz-transform: rotateY(0deg);

 -ms-transform:  rotateY(0deg);

 -o-transform:  rotateY(0deg);

 transform: rotateY(0deg);

 }

 .back { z-index:1;/*起始设置层  hover时候改变*/

 -webkit-transform: rotateY(-180deg);

 -moz-transform: rotateY(-180deg);

 -ms-transform:  rotateY(-180deg);

 -o-transform:  rotateY(-180deg);

 transform: rotateY(-180deg);

 }

 .flipper {

       -webkit-transition: transform .8s ease-in-out;

       -moz-transition: transform .8s ease-in-out;

       -ms-transition: transform .5s ease-in-out;

       -o-transition: transform .5s ease-in-out;

       transition: transform .5s ease-in-out;

       -webkit-transform-style: preserve-3d;  /*使其子类变换后得以保留 3d转换后的位置*/

       -moz-transform-style: preserve-3d;

       -ms-transform-style: preserve-3d;

       -o-transform-style: preserve-3d;

       transform-style: preserve-3d;

       display:block;position: relative;

      }

 .flip-container:hover .back {

      -webkit-transform: rotateY(0deg);

      -moz-transform:  rotateY(0deg);

      -ms-transform:  rotateY(0deg);

      -o-transform:  rotateY(0deg);

      transform: rotateY(0deg);

       z-index:2;

       }

 .flip-container:hover .front {

       -webkit-transform: rotateY(180deg);

       -moz-transform: rotateY(180deg);

       -ms-transform:  rotateY(180deg);

       -o-transform:  rotateY(180deg);

       transform: rotateY(180deg);

       z-index:10;

       }

 </style>

  <ul style=" margin-top:30px;">

     <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">

       <a href="brandLi.html" class="flipper">

       <div class="front "  style="outline:1px solid transparent; overflow:hidden"><img src="../images/TaylorSwift.jpg">前面</div>

       <div class="back " ><img src="../images/ameriancaptain.jpg">后面</div>

       </a>

    </li>

    <li class="flip-container  " ontouchstart="this.classList.toggle('hover');">

      <a href="brandLi.html" class="flipper">

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

     <div class="back " style="outline:1px solid transparent;background:#333; color:#fff">后面</div>

     </a>

    </li>

   </ul>

 </body>

 </html>

顺便提一句：

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

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

下面说明 matrix的属性

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

css3 翻牌(rotate) 以及翻转导致边缘锯齿解决方法的更多相关文章

XCode编译文件过多导致内存吃紧解决方法
XCode编译文件过多导致内存吃紧解决方法 /Users/~~/Library/Developer/Xcode/DerivedData 1) 然后找到编译文件删除就好了哦快去试试看吧
Jquery方法load之后导致js失效解决方法
Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...
yum安装命令：遇到的问题报错如下： File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: 通过看报错可以了解到是使用了python2的语法，所以了解到当前yum使用的Python2，因为我单独安装了python3，且python3设置为默认版本了，所以导致语法问题解决方法：使用python2.6 yum install
1.安装zip yum install -y unzip zip 2.安装lrszs yum -y install lrzsz 3.安装scp 遇到下面的问题: 结果提示: No package sc ...
阿里云提出的漏洞（Phpcms V9某处逻辑问题导致getshell漏洞解决方法）的问题
最近从阿里云云盾检测流出来的,相比使用阿里云服务器的朋友已经收到漏洞提醒:Phpcms V9某处逻辑问题导致getshell漏洞解决方法,这个漏洞怎么办呢?CMSYOU在这里找到针对性解决办法分享给大 ...
C# Winform频繁刷新导致界面闪烁解决方法
C#Winform频繁刷新导致界面闪烁解决方法一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供的默认双缓冲将 ...
winform频繁刷新导致界面闪烁解决方法
转自龙心文原文 winform频繁刷新导致界面闪烁解决方法一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供 ...
C# WinForm页面切换导致闪烁的解决方法
问题描述界面上放置大量的控件(尤其是自定义控件)会导致在窗体加载时,速度变得缓慢:当切换页面时,也会时常产生闪烁的问题,非常影响用户体验. 解决方法将此代码写在要解决闪烁问题的父窗体中: prot ...
C# WinForm页面切换导致闪烁的解决方法（转）
问题描述界面上放置大量的控件(尤其是自定义控件)会导致在窗体加载时,速度变得缓慢:当切换页面时,也会时常产生闪烁的问题,非常影响用户体验. 解决方法将此代码写在要解决闪烁问题的父窗体中: prot ...
解决 MVC4 Code First 数据迁移数据库发生更改导致调试失败解决方法（二）
文章转载自:http://www.cnblogs.com/amoniyibeizi/p/4486617.html 前几天学MVC过程中,遇到更改Model类以后,运行程序就会出现数据已更改的问题导致调 ...

随机推荐

Javascript 设计模式辛格尔顿
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/30490955 我一直很喜欢Js,,,今天写JsSingleton模式来实现,以及 ...
用友CDM系统期初导入商品资料经验
1. 倒入商品资料,是导入表spkfk(商品档案表).spkfjc(商品总结存表),主要是将spkfk全部编码导入. 2. 导入客商资料,是导入表mchk(业务单位登记表).m ...
GUI测试要点
本人测试知识还不完整,所以下面的文字总结自网络上的文章,红色字体为我平时的测试经验,如有雷同之处,还请见谅,仅自己学习之用. 转载请说明来自博客园--邦邦酱好. ------------------- ...
swift 笔记 (十八) —— 扩展
扩展扩展能够让我们给一个已有的类.结构体.枚举等类型加入�新功能,包含属性和方法,甚至是构造器,下标,支持协议等等... 甚至是我们拿不到源码的类.结构体.枚举,我们依旧能够给它加扩展... 看到这 ...
Access之C#连接Access
原文:Access之C#连接Access 如果是个人用的小程序的话.一般都推荐用Sqlite和Access 使用SQlite数据库需要安装SQLite驱动,详情:SQLite之C#连接SQLite 同 ...
linux下Ftp环境的搭建
Ftp环境的搭建 1.ftp软件的安装使用ssh远程连接linux系统,上传和下载一些文件,Ftp是不可少的 Ftp的安装很简单,远程登录系统后使用命令 yum list vsftpd 通过提示 ...
Shrio登陆验证实例详细解读（转）
摘要:本文采用了Spring+SpringMVC+Mybatis+Shiro+Msql来写了一个登陆验证的实例,下面来看看过程吧!整个工程基于Mavevn来创建,运行环境为JDK1.6+WIN7+to ...
Linux下一个OTL 采用long long类型数据库支持BIGINT
码如下面: #define OTL_BIGINT long long #define OTL_STR_TO_BIGINT(str,n) \ { \ n=atoll(str); \ } #define ...
【转】c#引用类型与值类型的区别大盘点
解析:CLR支持两种类型:值类型和引用类型.用Jeffrey Richter(<CLR via C#>作者)的话来说,“不理解引用类型和值类型区别的程序员将会把代码引入诡异的陷阱和诸多性能 ...
可以部署在广域网执行QQ高仿版 GG2014 （源代码）
距上次GG V3.7版本号(可在广域网部署执行的QQ高仿版 -- GG叽叽V3.7.优化视频聊天.控制很多其它相关细节)的公布.已经有50天了,这50天对于GG来说.是一个重大的飞跃. 由于这段时 ...

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

css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法的更多相关文章

随机推荐

热门专题

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

css3 翻牌(rotate) 以及翻转导致边缘锯齿解决方法的更多相关文章