css 中的旋转

来源:互联网 发布:未来软件客服电话 编辑:程序博客网 时间:2024/06/18 09:27

1、rotate 旋转角度

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg);/* IE 9 */
-moz-transform:rotate(30deg);/* Firefox */
-webkit-transform:rotate(30deg);/* Safari and Chrome */
-o-transform:rotate(30deg);/* Opera */
}
</style>
</head>
<body>
 
<div>Hello</div>
 
</body>
</html>

2、translate(50px,100px); 偏移。(50px距离left, 100px距离top) 

3、transform:scale(2,4); 拉伸。 (2为width扩大2倍,4为heigh扩大4倍)

4、skew(30deg,20deg); 30deg为水平上移动30度, 20deg为垂直上移动20度。

0 0