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
(
-X
deg ); 下面代码中没有优化; 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/
最新文章
- Ubuntu服务器被黑经历(ElastichSearch漏洞)
- 该应用的登录功能版本较旧,无法使用QQ账号登录,请升级到最新版本,如果还无法解决,请联系开发者升级。(错误码:100044)
- Nginx+Tomcat+Memcached负载均衡集群服务搭建
- easyui源码翻译1.32--Pagination(分页)
- 为OLED屏增加GUI支持
- php动态编译mysqli扩展
- 你不知道的JavaScript--Item6 var预解析与函数声明提升(hoist )
- 贪心算法----区间覆盖问题(POJ2376)
- oracle存储过程调试报错 ORA-0131 Insufficient privileges 处理
- Scrapy爬虫(4)爬取豆瓣电影Top250图片
- JDK自带的LinkedHashMap来实现LRU算法
- 定义对象为什不可以写到while语句外面。VS2017
- [转]js版的md5()
- 【TensorFlow】tf.nn.softmax_cross_entropy_with_logits的用法
- PAT 1065 1066 1067 1068
- 【oneday_onepage】——The Secret Of Steve<;2>;
- js基础(常用语法、类型、函数)
- Castle ActiveRecord学习(一)简介
- QT中QToolTip样式设置的两种方式
- MAX值-单元测试
热门文章
- javascript UniqueID属性
- POJ 1515 Street Directions
- M3U8格式解说及实际应用分析
- Windows Phone开发(43):推送通知第一集——Toast推送
- Cocos2d-x 3.0 红孩儿私人义务教育 - 第一章 熟人Cocos2d-x 3.0project
- 大页(huge pages) 三大系列 ---计算大页配置参数
- WPF 3D:使用GeometryModel3D的BackMaterial
- Linux System Programming note 8 ——File and Directory Management
- 隐藏快捷方式扩展名(.lnk)
- CentOS7 已安装telnet维修