目前越来越多的浏览器兼容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. javascript 中正则表达式应用

    <script type="text/javascript"> var str="<script type='text/javascript'> ...

  2. 利用Oracle自带的impdp和expdp进行简单备份

    目前有个这样的需求,每天晚上23点将生产库的数据备份到备份机器上,第二天备份机器的数据库可以直接使用,数据是昨天生产库的数据.(生产数据目前不多,全部数据不超过3000w条). 由于没有接触过高深的O ...

  3. [转] 主流JS框架中DOMReady事件的实现

    在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等.原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完 ...

  4. PHP语法基础

    1.PHP语法基础 PHP标记符 <?php ?> 常亮与变量 $a = 10; 变量 可以在运行过程中修改 $a = 10; $a = 20; $b = 5; echo $a+$b; c ...

  5. 对想进入Unity开发新人的一些建议

    提前声明:本文只是写给那些非职业游戏开发人士,只面向那些在校本科生,或已就业但无unity背景的同学们,当然是面对程序员方向的.本人刚工作也没多久,资历尚浅,之前在网上有一位同学让我谈谈一些想法,所以 ...

  6. centos,apache运维经验

    1.防止php木马在apache下跨站 在/etc/php.ini 中设置open_basedir=.:/tmp/  , (还需要加载网站所在的目录) 2.shell下搜索木马 find ./ -ty ...

  7. 小小收获for python

    包导入问题: 包之外导入:还是按照sys.path的搜索路径进行模块的导入 包内的导入:python3.0+     完全区分绝对导入和相对导入 from . import string     #在 ...

  8. Spring知识汇总

    Spring简介 Spring框架由Rod Johnson开发,2004年发布了Spring框架的第一版.Spring是一个从实际开发中抽取出来的框架,因此它完成了大量开发中的通用步骤,留给开发者的仅 ...

  9. JS正则大全

    验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证 ...

  10. 【SSM 5】Mybatis分页插件的使用

    一.添加maven依赖项 <span style="font-family:KaiTi_GB2312;font-size:18px;"><dependency&g ...