transform边缘锯齿 transform 图片模糊 解决方案
body{background: #fafafa; color: #626262;-webkit-font-smoothing: antialiased; font-smoothing: antialiased; } div,img{-webkit-outline:1px solid transparent;outline:1px solid transparent;}
transform:rotate(180deg) translateZ(0);
解决方案：
http://www.knowsky.com/612244.html
http://www.bluesdream.com/case/css3/TransformRotateSerrated/
首先看结构：
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类；
{ 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 " >前面 针对火狐 outline:1px solid transparent用于消除锯齿</div>
另外 ，总感觉好像哪里不协调；如果仔细观察，会发现网上的某些3D翻转效果和我上边的例子的效果有些不同。如果你使用右边为轴进行翻转，你会发现卡片会翻出容器之外。这不仅仅是翻转了卡片，还使卡片的的边从右边移动到了左边； 要针对处理 transform-origin: rightcenter; 以及水平位移的距离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 >103 <li class="flip-container " ontouchstart="this.classList.toggle('hover');">104 <a href="brandLi.html" class="flipper">105 <div class="front " ><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 " >前面 针对火狐 outline:1px solid transparent用于消除锯齿</div>113 <div class="back " >后面</div>114 </a>115 </li>116 </ul>117 118 </body>119 </html>
顺便提一句：
1，ie 6 ， ie7也是支持rotate() 的；不过运动中心默认不是transform-origin：center center；需要js修正；
2，斜切：skew，rotate旋转 等其实归更到底都是通过matrix矩阵变换实现的，这个具体查资料即可；
http://www.bluesdream.com/blog/css3-transform-rotate-serrated-solution.html
由于现在主要接触移动端，不需要考虑IE等古董浏览器的兼容性问题，所以能最大程度的使用CSS3所带来的便捷。
在近期的一个项目中，根据设计需求，需要把图片以倾斜5度的方式来呈现出效果。于是便做了一个例子：-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度。本以为轻而易举，可遇到了问题。在Fireofx中显示正常，但在webkit内核下的浏览器中，如Chrome和Safari，图片边缘会有很明显锯齿。也可以说是webkit抗锯齿的一个BUG。另外需要补充的一点，如果图片上级元素含有overflow:hidden;属性，则会让锯齿感更明显。
通过查找相关的资料，终于找到了解决办法。便是使用CSS3 3D transforms，通过GPU来渲染，能有效的起到抗锯齿效果。我们只要简单的在CSS3 transform属性中加入translateZ(0)。例：-webkit-transform: rotate(5deg) translateZ(0);
不过使用ipad下的safari打开网页，仍会有锯齿。
原理解释：http://sentsin.com/web/999.html
transform是诸多css3新特性中最打动我的，因为它让方方正正的box module变得真实了。
transform通过一组函数实现了对盒子大小、位置、角度的2D或者3D变换。不过很长时间内，我对以下问题都想不太明白：
1、尺寸缩放scale与zoom变换有何不同，为什么被scale的盒子里的内容不会错位，但zoom不是。
2、位移（transform:translate）与相对定位、绝对定位（position:relative | absolute）有何关系？
3、在实际项目中发现，位图（无论是background-image还是img）在被transform后会模糊掉，尤其是scale；不仅如此，在一些网站，比如tmall.com，即使是矢量的svg文件在使用transform后，依然模糊了，transform是否对作用的盒子进行了类似栅格化的操作？
4、在实际项目中发现，如果父级元素使用了transform且其中的子元素进行了position:fixed定位，那么设置了position:fixed的子元素将不再基于窗口定位。
5、这种场景暂时未能重现，在chrome下：父级元素使用了position:fixed，子元素<a href=".."></a>设置了:hover伪类、transition过渡动画、并使用javascript动态添加/删除其class，此时会出现:hover样式失效或添加的class样式失效且transition过渡动画失效的现象。
等等。
先说原理吧。
在网上查看了一些大神的博客，transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装，w3c里没找到有关说明。对于线性代数里的东西，博主表示非常小白，其中的数学原理，还是交给其他人去解释吧o(???)o
w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，如向右向下，都是在这个坐标系内以像素方式表示，原文：
The CSS visual formatting model describes a coordinate system within each element is positioned. Positions and sizes in this coordinate space can be thought of as being expressed in pixels, starting in the origin of point with positive values proceeding to the right and down.
那是不是意味着scale缩放，是否只是像素意义上的缩放呢？由此，因缩放导致的svg等矢量内容模糊失真是情理之中了？?_?
个人猜测，应该先转换成像素，然后进行渲染，这应该和每个浏览器具体渲染过程有关，相关文档我没有查，如果有知道的，请给我留言。
要理解transform，还有一个事情要搞清楚，就是visual formatting model，借助谷歌度娘，找到了w3chelp上的中文版解释：
可视化格式模型是非常抽象的概念。它是 CSS 布局的核心，通过它，框( box )可以获得应有的尺寸，放到需要的位置。
我们通常所看到的页面都是平面 2D 的效果，但可视化模型却是 3D 的，除了 X 轴，Y 轴，还有决定元素显示顺序1的 Z 轴。 Z 轴垂直穿过计算机屏幕，面向用户的一侧是正轴，框在 Z 轴方向上离用户越近，显示越是靠前。
可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( document tree )
……
本部分会涉及很多新概念，如包含块、元素的类型、定位体系、块级格式化上下文、行内格式化上下文、浮动、绝对定位和 z-index，以及可视化格式模型的细节部分，自动宽度高度的计算等。
博主第一次听到visual formatting model这个概念，但看了解释应该知道，这不是一个新概念，姿势水平捉急了?_?
根据这个解释，元素设置了transform并不会改变元素所在的文档流，其布局仍然受盒模型支配，因此这里的变换的效果是可以与浮动、定位并存的。
-
当元素设置了transform后，会为该元素定义一个坐标系，并且在该坐标系内进行矩阵变换，将变换结果映射到用户坐标系（也就是实际上的上下文）中。
-
多个矩阵变换函数将依次从左到右计算，如
transform:translate(80px, 80px) scale(1.5, 1.5)，浏览器会先计算位移，再缩放1.5倍。以下两种代码效果相同：html <div > <div > <div ></div> </div> </div>html <div > </div> -
坐标原点的位置受属性
transform-origin的影响。 -
如果是3D变换，则还会将其加入一个3D渲染上下文（3D rendering context）。根据个人理解，无论有多少个转换为3D的元素，其将始终在这个上下文内并可能相互影响，类似一个文档中的多个被绝对定位的元素。
-
任何非none的transform值都会导致一个堆叠上下文（stacking context）和包含块（containing block）的创建。
不过，并不意味着和谐，不然怎么会有那么多坑问题嘛！(,,???,,)
如果元素因为transform而撑开了父级元素，父级元素会根据自身的overflow属性决定是否出现滚动条、隐藏溢出的部分或是别的什么。
另外，根据规范，由于堆叠上下文的创建，该元素会影响其子元素的固定定位：被设置position:fixed的子元素将不会基于viewport定位，而是基于这个父元素。
我们知道，一般情况下，所有的position值不为static的元素都会被放到同一个堆叠上下文内（ie不高级浏览器不算），也就是说，只存在一个堆叠上下文。而设置了transform的元素则不同，由于它创建了一个新的堆叠上下文，也就是说，其内部被定位的元素的z-index会放在一个完全独立的空间内。
但是这个堆叠上下文不包含被定义transform的元素本身，它仍被放在更大的堆叠上下文（如果有的话）里。
说到这，开篇提到的问题2、4都已经找到答案了，但目前，Chrome还存在一个bug：rendering bug : position:fixed AND -webkit-transform。
上面提得另一个问题重现场景比较麻烦，先不讨论了。
留几个坑回头填：
- 当
transform遇见display:table | table-row | table-cell - 3D渲染上下文是个什么玩意
- 陌生又熟悉的backface-visibility
- transform 与 css3动画
- transform 与 canvas
- transform 与 svg
