目前越来越多的浏览器兼容CSS3标准了，就连IE浏览器老大哥也开始向CSS3低头，微软宣布IE9浏览器支持更多的CSS3属性，IE9更注重 HTML5标准。不过CSS3里有一个使对象旋转的属性transform rotate，号称兼容CSS3的浏览器对它的支持也不算好，好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持 这个属性。唯独在IE浏览器里对这个transform属性无法通过一般的CSS写法去实现。

　　在W3C官方的标准里，通过transform属性使对象旋转的写法如下：transform: rotate(40deg); /* 其中40是旋转的角度 */

　　可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低，所以我们可以用下面的hack去提高渲染效率：

　　-o-transform: rotate(40deg); /* Opera浏览器 */

　　-webkit-transform: rotate(40deg); /* Webkit内核浏览器 */

　　-moz-transform: rotate(40deg); /* Firefox浏览器 */

有个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>旋转图片</title>

<style type="text/css">

.image_test_1, .image_test_5 {

    -moz-transform: rotate(-5deg);

    -webkit-transform: rotate(-5deg);

    -o-transform: rotate(-5deg);

    transform: rotate(-5deg);

}

.image_test_2, .image_test_4 {

    -moz-transform: rotate(5deg);

    -webkit-transform: rotate(5deg);

    -o-transform: rotate(5deg);

    transform: rotate(5deg);

}

 </style>

</head>

<body>

<img class="image_test_1" src="../imges/2011-03-07_172008.jpg"/>

<img class="image_test_2" src="../imges/2011-03-07_172008.jpg"/>

<img class="image_test_3" src="../imges/bd_logo1_31bdc765.png" />

<img class="image_test_4" src="../imges/2011-03-07_172008.jpg"/>

<img class="image_test_5" src="../imges/hyy.jpg"/>

</body>

</html>

-moz-transform: rotate(-5deg);的更多相关文章

  1. transform:rotate在手机上显示有锯齿的解决方案大全

    先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...

  2. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  3. CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  4. 使用input range滑块，控制元素transform rotate旋转样式

    <!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...

  5. transform:rotate()将元素进行不同角度的旋转

    通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...

  6. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  7. transform:rotate在手机上显示有锯齿的解决方案

    transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决 ...

  8. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  9. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

随机推荐

  1. oracle V$SESSION各个字段的含义

    源地址:https://zhidao.baidu.com/question/345549929.html SADDR - session addressSID - session identifier ...

  2. SOCKET 服务器停止服务时清理连接操作

    刚想到一个情况,正好是工作中遇到的. 当服务器停止时,正好有连接的请求正在被处理,而此时服务端需要等待该请求被正常的处理完,然后给客户端发送响应报文. 正常情况下,服务器停止的时候,是希望发送了响应报 ...

  3. 从零开始系列-R语言基础学习笔记之二 数据结构（二）

    在上一篇中我们一起学习了R语言的数据结构第一部分:向量.数组和矩阵,这次我们开始学习R语言的数据结构第二部分:数据框.因子和列表. 一.数据框 类似于二维数组,但不同的列可以有不同的数据类型(每一列内 ...

  4. Android 通过广播获取网络状态

    Android系统网络连接状态的改变会发一个广播,注册一个广播接收者,实时动态的检测网络状态,及时提醒用户,优化用户体验.          本文仅提供WIFI 状态的检测作为参考,其他网络连接方式请 ...

  5. Mware vCenter Server 识别固态硬盘为（非SSD）是什么原因？

    人工定义一下: 用root登录进ESXi控制台:esxcli storage nmp device list #列出储存清单esxcli storage nmp satp rule add -s VM ...

  6. Linux内核模块设计

    内核的设计有两种方式:单内核和微内核,两者各有优劣,关于两者的比较可以参见wiki．windowds和Solaris采用微内核结构． Linux内核采用单内核结构,设计比较简单,但单内核的理念是把所有 ...

  7. 一次Oracle 11g+FluentNHibernate AutoMapping组合尝试

    本文的上下文环境 操作系统:Win7 x64 Ultimate开发工具:Visual Studio 2013 一.前言 在以前开发的大多数场景下,使用的开发语言是C#,使用的数据库是Sql Serve ...

  8. org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/pcisv7]]

    重新配jar包

  9. 《Linux企业应用案例精解(第2版)》新书发售啦

    本书在出版当年就获得了不错的销量,同时被中国科学院国家科学图书馆.中国国家图书馆.首都图书馆.清华大学.北京大学等上百所国内综合性大学图书馆收录为馆藏图书,在IT业界赢得了良好的口碑.随后2012年年 ...

  10. 深入理解JS异步编程五（脚本异步加载）

    异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...