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

最新推荐文章于 2024-04-04 13:53:55 发布

weixin_30498921

最新推荐文章于 2024-04-04 13:53:55 发布

阅读量307

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/hyj1/p/5754436.html

本文介绍了CSS3中transform属性的使用方法及其在不同浏览器中的兼容性问题。针对transform:rotate()在各浏览器中的表现差异，给出了特定前缀的hack解决方案以提升渲染效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前越来越多的浏览器兼容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>

转载于:https://www.cnblogs.com/hyj1/p/5754436.html