主要知识点：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>

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

直接用 HTML5 API里：classList；

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

  1. {
  2.     length: {number}, /* # of class on this element */
  3.     add: function() { [native code] },
  4.     contains: function() { [native code] },
  5.     item: function() { [native code] }, /* by index */
  6.     remove: function() { [native code] },
  7.     toggle: function() { [native code] }
  8. }

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

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

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

 顺便提一句：

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

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

下面说明   matrix的属性

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

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

  1. XCode编译文件过多导致内存吃紧解决方法

    XCode编译文件过多导致内存吃紧解决方法 /Users/~~/Library/Developer/Xcode/DerivedData 1) 然后 找到编译文件 删除 就好了哦 快去试试看吧

  2. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

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

  4. 阿里云提出的漏洞（Phpcms V9某处逻辑问题导致getshell漏洞解决方法）的问题

    最近从阿里云云盾检测流出来的,相比使用阿里云服务器的朋友已经收到漏洞提醒:Phpcms V9某处逻辑问题导致getshell漏洞解决方法,这个漏洞怎么办呢?CMSYOU在这里找到针对性解决办法分享给大 ...

  5. C# Winform频繁刷新导致界面闪烁解决方法

    C#Winform频繁刷新导致界面闪烁解决方法 一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供的默认双缓冲将 ...

  6. winform频繁刷新导致界面闪烁解决方法

    转自龙心文 原文 winform频繁刷新导致界面闪烁解决方法 一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供 ...

  7. C# WinForm页面切换导致闪烁的解决方法

    问题描述 界面上放置大量的控件(尤其是自定义控件)会导致在窗体加载时,速度变得缓慢:当切换页面时,也会时常产生闪烁的问题,非常影响用户体验. 解决方法 将此代码写在要解决闪烁问题的父窗体中: prot ...

  8. C# WinForm页面切换导致闪烁的解决方法（转）

    问题描述 界面上放置大量的控件(尤其是自定义控件)会导致在窗体加载时,速度变得缓慢:当切换页面时,也会时常产生闪烁的问题,非常影响用户体验. 解决方法 将此代码写在要解决闪烁问题的父窗体中: prot ...

  9. 解决 MVC4 Code First 数据迁移 数据库发生更改导致调试失败解决方法（二）

    文章转载自:http://www.cnblogs.com/amoniyibeizi/p/4486617.html 前几天学MVC过程中,遇到更改Model类以后,运行程序就会出现数据已更改的问题导致调 ...

随机推荐

  1. C 一个字符串有三段，第一段原样输出，第二段为要输出字符串的长度，第三段为依据第二段长度补齐第一段

    C 一个字符串有三段,第一段原样输出.第二段为要输出字符串的长度,第三段为依据第二段长度补齐第一段 比如:输入abc 11 12.输出abc12121212 #include<stdio.h&g ...

  2. poj1185炮兵阵地

    #include <iostream> #include <cstdio> #include <cmath> #include <algorithm> ...

  3. 蚁群算法和简要matlab来源

    1 蚁群算法原理 从1991由意大利学者 M. Dorigo,V. Maniezzo 和 A. Colorni 通过模拟蚁群觅食行为提出了一种基于群体的模拟进化算法--蚁群优化.极大关注,蚁群算法的特 ...

  4. 递归算法的数据结构和算法 C++和PHP达到

    递归算法:它是一种间接的方法调用本身,直接或. 实施过程:按功能或子程序完成.在函数编写代码或子程序直接或间接拥有被称为.你可以完成递归. (相同类型的问题,子问题到最小问题有已知条件,然后来求解,然 ...

  5. 【原创】poj ----- 2524 Ubiquitous Religions 解题报告

    题目地址: http://poj.org/problem?id=2524 题目内容: Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 6 ...

  6. 很久没来这里，今天的评测java怪东西，左右Date类和时间戳转换

    在发展过程中,经常会遇到利用上课时间.说话的Date类就不得不提时间戳,左右fr=aladdin" target="_blank">的定义大家能够看看网上对时间戳的 ...

  7. Qt计算器开发(二)：信号槽实现数学表达式合法性检查

    表达式的合法性 由于我们的计算器不是单步计算的,所以我们能够一次性输入一个长表达式.然而假设用户输入的长表达式不合法的话,那么就会引发灾难.所以有必要对于用户的输入做一个限制. 一些限制举例: 比方, ...

  8. Ubuntu 13.04/12.10安装Oracle 11gR2图文教程(转)

    Ubuntu 13.04/12.10安装Oracle 11gR2图文教程 原文标题:How to Install Oracle 11G R2 Enterprise Edition Database U ...

  9. git commit -s -m 注释中的换行 [加入signed-off-by

    windows环境下的Git Bash中注释的换行: 使用单引号. 或者是在Linux系统里面用终端 git add . git commit -m ' . this is the test . up ...

  10. 构建安全的Xml Web Service系列之wse之证书存储位置

    原文:构建安全的Xml Web Service系列之wse之证书存储位置 我们在前几天对xml web service的安全性提出了一些建议,大家可以通过以下地址访问: 构建安全的Xml Web Se ...