css属性之transform

最新推荐文章于 2025-05-27 16:38:22 发布

转载最新推荐文章于 2025-05-27 16:38:22 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/338443

本文详细介绍了CSS中transform属性的应用，包括如何使用该属性对页面元素进行2D和3D的旋转、缩放、移动及倾斜等操作。通过具体实例展示了如何使div元素旋转，并提供了不同浏览器的支持情况。

定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

实例

旋转 div 元素：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>

<div>Hello World</div>

</body>
</html>

效果

tips:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。
 
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
 
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
 
Opera 只支持 2D 转换。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5090805.html，如需转载请自行联系原作者