<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>transform:css3.0新标准中的一些属性</title> <style type="text/css"> .menu ul { border-top: 2px solid #f5f5f5; padding: 0 10px; margin: 0; } .menu ul li { padding: 0; margin: 0; list-style: none; } .menu ul li a{ color: #fff; float: left; margin: 0 5px; font-size: 14px; width: 65px; height: 50px; line-height: 50px; text-align: center; padding: 10px 5px; background: #151515; border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; text-shadow: 0 1px 1px #686868; text-decoration: none; } .menu ul li.translate a{ background: #2EC7D2; } .menu ul li.translate-x a { background: #8FDD21; } .menu ul li.translate-y a { background: #F45917; } .menu ul li.rotate a { background: #D50E19; } .menu ul li.scale a { background: #cdddf2; } .menu ul li.scale-x a { background: #0fDD21; } .menu ul li.scale-y a { background: #cd5917; } .menu ul li.skew a { background: #519; } .menu ul li.skew-x a { background: #D50; } .menu ul li.skew-y a { background: #E19; } .menu ul li.matrix a { background: #919; } /* x-轴偏移*/ .menu ul li.translate-x a:hover { -moz-transform: translateX(-10px); -webkit-transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } /* y-轴偏移*/ .menu ul li.translate-y a:hover { -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } /* x/y 轴都偏移*/ .menu ul li a:hover { -moz-transform: translate(-10px,-10px); -webkit-transform: translate(-10px,-10px); -o-transform: translate(-10px,-10px); -ms-transform: translate(-10px, -10px); transform: translate(-10px,-10px); } /* 角度旋转 */ .menu ul li.rotate a:hover { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* 缩放 缩放都是以原元素中心点为参考点的 */ .menu ul li.scale a:hover { -moz-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); -o-transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); transform: scale(0.8,0.8); } .menu ul li.scale-x a:hover { -moz-transform: scaleX(0.8); -webkit-transform: scaleX(0.8); -o-transform: scaleX(0.8); -ms-transform: scaleX(0.8); transform: scaleX(0.8); } .menu ul li.scale-y a:hover { -moz-transform: scaleY(1.2); -webkit-transform: scaleY(1.2); -o-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2); } /* 旋转 */ .menu ul li.skew a:hover { -moz-transform: skew(45deg,15deg); -webkit-transform: skew(45deg,15deg); -o-transform: skew(45deg,15deg); -ms-transform: skew(45deg,15deg); transform: skew(45deg,15deg); } /** transform:skewX(x) */ .menu ul li.skew-x a:hover { -moz-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); -o-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg); } /** transform:skewY(y) */ .menu ul li.skew-y a:hover { -moz-transform: skewY(30deg); -webkit-transform: skewY(30deg); -o-transform: skewY(30deg); -ms-transform: skewY(30deg); transform: skewY(30deg); } .menu ul li.matrix a:hover { -moz-transform: matrix(1,1,-1,0,0,0); -webkit-transform: matrix(1,1,-1,0,0,0); -o-transform: matrix(1,1,-1,0,0,0); -ms-transform: matrix(1,1,-1,0,0,0); transform: matrix(1,1,-1,0,0,0); } </style> </head> <body> <div class="menu"> <ul class="clearfix"> <li class="item translate"><a href="#">Translate</a></li> <li class="item translate-x"><a href="#">TranslateX</a></li> <li class="item translate-y"><a href="#">TranslateY</a></li> <li class="item rotate"><a href="#">Rotate</a></li> <li class="item scale"><a href="#">Scale</a></li> <li class="item scale-x"><a href="#">ScaleX</a></li> <li class="item scale-y"><a href="#">ScaleY</a></li> <li class="item skew"><a href="#">Skew</a></li> <li class="item skew-x"><a href="#">SkewX</a></li> <li class="item skew-y"><a href="#">SkewY</a></li> <li class="item matrix"><a href="#">Matrix</a></li> </ul> </div> </body> </html>
相关推荐
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册CSS3.0中文参考手册,CSS3.0中文参考手册,CSS3.0中文参考手册
中文帮助文档 Html5中文帮助文档 Css3.0中文帮助文档 Html5 Css3.0 中文帮助文档 Html5中文帮助文档 Css3.0中文帮助文档 Html5 Css3.0
完整的CSS2.0和CSS3.0的chm文档,可以方便地查询CSS的各种属性和用法。
CSS3.0中文完全参考手册
css2.0和css3.0的中文参考手册
CSS 3.0 API文档中文版,以最低分上传提供给大家下载。
对于网页开发的同学们来说CSS样式是必不可少的主流样式。
css 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweavercss 3.0 插件 dreamweaver
《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...
CSS 3.0 中文参考手册(CHM版);写得非常好里面彩色搭配
CSS 3.0 中文参考手册(CHM版).rar
这是《css商业网站布局之道》光盘里附带的的CSS中文完全参考手册,chm制作的非常不错,页面很精美,内容很充实,而且每一项都编辑得很好,很专业。
CSS3.0基础知识,介绍了级联风格样式表的相关信息以及如何用CSS3.0进行网页风格设计
样式表样式css3.0文档下载! 样式表样式css3.0文档下载! 样式表样式css3.0文档下载!
css3.0 css3帮助文档 css3.chm
CSS3.0中文帮助手册,CSS3.0中文chm
所有需要的css资源都能在这个包中找到,囊括了css3.0和css2.0的内容。
js、css3.0、jquery1.8.3 中文帮助文档 chm