css属性之transform

定义和用法

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 转换。

巴特西

css属性之transform

定义和用法

实例

最新文章

热门文章