一个css transform效果很有图片的感觉- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 一个css transform效果很有图片的感觉

CSS样式表: css分页样式代码; 用css filter做鼠标滑过图片效果; 有关于IE8 Beta 1两个提醒; css Hspace 和vspace的图片控制实例; firefox background-image垂直平铺问题的解决方法; 发一个css比较清爽的写法; htm页面中<a name>加name和id的冲突附解决方法; javascript 获取特定的 CSS属性值; CSS教程之CSS的应用; html页面head区域的编码书写规范; html滚动条样式; 不用图片作背景CSS做的小灯笼效果_练习用; 网页绿色系配色应用实例图文; 网页中英文混排行高不等问题的解决方法; CSS Hack 汇总速查手册浏览器兼容必会; css文本框与按钮美化效果代码; 网页设计中的 serif 和 sans-serif字体应用; 采用XHTML和CSS设计可重用可换肤的WEB站点的方法; CSS 浏览器的等宽空格问题解决; 欲练CSS ，必先解决IE的一些细节分析

No. « ‹ 89 90 91 92 › »

技术文章搜索

关键字

CSS样式表中的一个css transform效果很有图片的感觉

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 127 ::

收藏到网摘: n/a

CSS解决链接锚点定位偏移的代码 ie6,ie7,firefox的textarea滚动条、边框

运行后查看效果。非常的不错。

<style type="text/css">
.pre {
font-family:微软雅黑;
width:420px;
border:3px solid red;
/*for IE*/
filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand",M11=1,M12=-0.4,M21=0.4,M22=1);
/*for firefox*/
-moz-transform:translate(100px) rotate(35deg);
-moz-transform-origin:40% 100%;
/*for chrome,safari*/
-webkit-transform:translate(100px) rotate(35deg);
-webkit-transform-origin:40% 100%;
}
</style>
<pre class="pre">        pre {
font-family:微软雅黑;
width:420px;
border:3px solid red;
/*for IE*/
filter : progid:DXImageTransform.Microsoft.
Matrix(SizingMethod="auto expand",
M11=1,M12=-0.4,M21=0.4,M22=1);
/*for firefox*/
-moz-transform:translate(100px) rotate(35deg);
-moz-transform-origin:40% 100%;
/*for chrome,safari*/
-webkit-transform:translate(100px) rotate(35deg);
-webkit-transform-origin:40% 100%;
}
</pre>
<script type="text/javascript">
if(window.ActiveXObject) {
//alert(document.getElementsByTagName("pre")[0].innerHTML);
document.getElementsByTagName("pre")[0].style.fontFamily="Courier New";
}
</script>

提示：您可以先修改部分代码再运行

转载请注明出处：http://www.cnblogs.com/sohighthesky/

CSS解决链接锚点定位偏移的代码 ie6,ie7,firefox的textarea滚动条、边框

评论 (0) All