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

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

CSS样式表: CSS Sprites 技术分析; csdn 博客的 css样式 v5; CSS 实例实现清除浮动; CSS Sprites 圆角制作教程; 关于css @import url（）总结; 一个非常精典的纯CSS漫画,登峰造极.; css 背景透明实现代码; css 横排实现代码; CSS 像素图制作攻略; CSS 实现绝对底部一个完美解决方案; CSS 代码质量提高的10条实用技巧; CSS 扑克牌效果实现代码; margin 负值引起的层级（z-index）问题; 关于Firefox下截取后省略号的问题; 14个华丽的javascript图表资源和插件; IE img多余5像素空白解决方法; css 不同媒介的显示样式控制方式; 打印网页中不打印页面中的某些内容; CSS Sprites 图片整合技术分析; 文字超过宽度显示省略号（无js全兼容）

No. « ‹ 76 77 78 79 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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