rotate()旋转:旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。
如果这个值为正值,元素相对原点中心顺时针旋转;
如果这个值为负值,元素相对原点中心逆时针旋转。
用法:transform:rotate(-30deg);
效果:
关于加上浏览器的前缀:
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-mz-transform:rotate(-30deg);
为什么要加前缀 ?
css标准中各个属性都要经历从草案到定稿的过程,css3中的属性进展都不一样。浏览器厂商在标准尚未明确情况下提前支持会有风险,而且各个浏览器对CSS3的支持也不同,所以每种浏览器使用了自己的私有前缀与标准进行区分,当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性。
目前已有很多私有前缀可以不写了,但为了兼容老版本的浏览器,可以仍沿用私有前缀和标准方法,逐渐过渡。
前缀 浏览器
-webkit chrome和safari
-moz firefox
-mz IE
-o opera
注意:IE9版本以下不支持,所以就算加上前缀也是没用的。Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。
Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器,是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
html
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01变形--旋转 rotate()</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrapper">
<div><span>哈哈,旋转旋转(^_^)</span></div>
</div>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.wrapper {
margin: 100px auto;
width: 300px;
height: 200px;
border: 2px dotted #0F0;
}
.wrapper div {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background: #093;
color: #fff;
font-size:20px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz--transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-mz-transform:rotate(-30deg);
/*为什么要加前缀 ?
css标准中各个属性都要经历从草案到定稿的过程,
css3中的属性进展都不一样。浏览器厂商在标准尚未
明确情况下提前支持会有风险,而且各个浏览器对CSS3的支持
也不同,所以每种浏览器使用了自己的私有前缀与标准进行区分,
当标准确立后,各大浏览器将逐步支持不带前缀的css3新属性
目前已有很多私有前缀可以不写了,但为了兼容老版本的浏览器,可以仍沿用私有前缀和标准方法,逐渐过渡。
*/
/* 前缀 浏览器
-webkit chrome和safari
-moz firefox
-mz IE
-o opera
注意:IE9版本以下不支持,所以就算加上前缀也是没用的。
*/
}
/*.wrapper span {
display: block;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}*/