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

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

CSS样式表: CSS优先级规则的细节; CSS失效，原来是和网页第一段代码有关; 你真的了解CSS吗？你是属于哪个层次？; 让样式表CSS代码更加专业规范; 建议网页设计师用CSS制作网站导航菜单; 简单学习css组合与CSS嵌套的写法; CSS学习之css代码的简写的十条规则; 条件CSS的介绍; CSS教程:网页中多个样式表顺序问题; CSS教程：网页版面设计无效的10个原因; 页面重构工程师应该具有的技能和素质; 选择正确DOCTYPE解决CSS在网页失效问题; Opera中国的WEB标准课程; 简单介绍Web Developer插件制作网页; CSS布局带来的巨大影响:CSS display属性值; 用div css模拟表格对角线; IE Firefox在css中的差别 (部分); 不用js可以实现信息提示效果; CSS解决未知高度的垂直水平居中自适应问题; CSS cursor 属性 -- 鼠标指针样式效果

No. « ‹ 16 17 18 19 › »

技术文章搜索

关键字

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

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

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