主要知识点: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) 以及翻转 导致边缘锯齿解决 方法的更多相关文章

  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. 王立平--Failed to push selection: Read-only file system

    往android模拟器导入资源,失败. 提示:仅仅读文件. mnt是仅仅读文件.应点击sdcard.,在导入

  2. 【足迹C++primer】52、,转换和继承虚函数

    转换和继承,虚函数 Understanding conversions between base and derived classes is essential to understanding h ...

  3. WPF换肤之一:创建圆角窗体

    原文:WPF换肤之一:创建圆角窗体 我们都期望自己的软件能够有一套看上去很吸引人眼球的外衣,使得别人看上去既专业又有美感.这个系列就带领着大家一步一步的讲解如何设计出一套自己的WPF的窗体皮肤,如果文 ...

  4. 数据结构 《18》----RMQ 与 LCA 的等价性 (一)

    前言     RMQ: 数组 a0, a1, a2,..., an-1, 中求随意区间 a[i+1], a[i+2], ..., a[i+k] 的最小值     LCA: 求二叉树中两个节点的最低公共 ...

  5. iOS_8_键盘操作简单

    最后效果图: BeyondViewController.h // // BeyondViewController.h // 9_键盘的简单处理 // // Created by beyond on 1 ...

  6. java web开发人员经常使用标签

    struts标签库 国际化配置 配置国际化 1.国际化配置 在struts自带的app中的struts-config.xml中的<message-resources parameter=&quo ...

  7. JAVA学习课第二十八届(多线程(七))- 停止-threaded多-threaded面试题

    主密钥 /*  * wait 和 sleep 差别?  * 1.wait能够指定时间也能够不指定  * sleep必须指定时间  * 2.在同步中,对CPU的运行权和锁的处理不同  * wait释放运 ...

  8. facade pattern

    外观模式是一种使用频率非常高的设计模式,它通过引入一个外观角色来简化客户端与子系统之间的交互,为复杂的子系统调用提供一个统一的入口,使子系统与客户端的耦合度降低,且客户端调用非常方便.外观模式并不给系 ...

  9. Unity 捕获IronPython脚本错误

    using System; using System.Collections.Generic; using System.IO; using System.Reflection; using Syst ...

  10. rac 中节点的vip在该节点启动不了,在其它节点正常启动。

    本实验是在虚拟机中! 与实验同样的问题:http://blog.csdn.net/wanghui5767260/article/details/38850335 问题描写叙述: 节点1.节点2和节点3 ...