-moz-transform: rotate(-5deg);
目前越来越多的浏览器兼容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);的更多相关文章
- transform:rotate在手机上显示有锯齿的解决方案大全
先来个兼容性说明,洗洗脑: div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate ...
- CSS3 transform rotate(旋转)锯齿的解决办法
-moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...
- CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...
- 使用input range滑块,控制元素transform rotate旋转样式
<!DOCTYPE html> <html> <head> </head> <body> <!-- 第一步:设置div旋转对象和inp ...
- transform:rotate()将元素进行不同角度的旋转
通过设置transform:rotate()可以将元素进行不同角度的旋转: 下面是一些测试代码: <!DOCTYPE html> <html> <head> < ...
- 拒绝IE8-,CSS3 transform rotate旋转动画效果(支持IE9+/chrome/firefox)
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
- transform:rotate在手机上显示有锯齿的解决方案
transform:rotate 属于简单好用的效果,但在手机上显示时,会有比较明显锯齿. 解决方案也很简单, 利用外层容器的overflow:hidden 加上图片margin:-1px 就可以解决 ...
- 通过js获取元素css3的transform rotate旋转角度方法
我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...
- 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的
这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...
随机推荐
- SpringMVC中利用@InitBinder来对页面数据进行解析绑定
同步发布:http://www.yuanrengu.com/index.php/springmvc-user-initbinder.html 在使用SpingMVC框架的项目中,经常会遇到页面某些数据 ...
- JS设计模式--简单工厂模式
在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...
- javascript 中正则表达式应用
<script type="text/javascript"> var str="<script type='text/javascript'> ...
- SpringMVC 自动封装枚举类的方法
springmvc默认无法自动封装枚举类,解决方法如下: 1.枚举类 public enum GoodsPromoteEnum { /** * 0 精品 */ fine("精品", ...
- js执行跨域请求
//js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...
- Python-7 列表list
#1 创建列表.向列表中添加元素 1) 列表名称.append(*) 2) 列表名称.extend([*,*,...]) 3) 列表名称.insert(位置,*) member = ['小甲鱼','小 ...
- Android开发:程序目录结构详解
HelloWorld程序的目录结构概述 我们可以在文件夹中看到,HelloWorld程序的目录主要包括:src文件夹.gen文件夹.Android文件夹.assets.res文件夹. AndroidM ...
- msChart组件安装与编程
首先下载mschart.ocx文件,至于它所依赖的.net环境,网上有很多,本人下载的插件给出链接,http://www.cr173.com/soft/47300.html而它所依赖的环境可以从我的云 ...
- opencv基于混合高斯模型的图像分割
#include "stdafx.h" #include <opencv\cv.h> #include <opencv\highgui.h> #includ ...
- django--app(六)
1.应用加载 服务启动后,再新添加应用,是不会自动加载的,需要重启服务.