一个css transform效果 很有图片的感觉

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


<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/