简单旋转特效的实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/styleTest.css">
</head>
<body>
<div class="toptitle">
<a class="spliteTitle " href="#">首页</a>
<a class="spliteTitle" href="#">HTML基础</a>
<a class="spliteTitle" href="#">HTML入门</a>
<a class="spliteTitle" href="#">HTML5</a>
<a class="spliteTitle" href="#">CSS基础</a>
<a class="spliteTitle" href="#">CSS入门</a>
<a class="spliteTitle" href="#">CSS3</a>
<a class="spliteTitle" href="#">CSS Hack</a>
<a class="spliteTitle" href="#">CSS工具</a>
<a class="spliteTitle" href="#">PS教程</a>
<a class="spliteTitle" href="#">WEB标准</a>
</div>
</body>
</html>
*{margin: 0;padding: 0;}
body{background: #f7f8d5;}
.toptitle{
display: inline-block;
width: 900px;
height: 50px;
background-color: #f9f9ff;
margin: 0 90px;
}
.toptitle .spliteTitle{
display: inline-block;
margin-top: 10px;
margin-left: 3px;
padding: 5px 5px 5px 5px ;
background-color: #639b98;
text-decoration:none;
color: #fff;
/**设置需要旋转的速度**/
-moz-transition:ease-out 0.2s;
-o-transition:ease-out 0.2s;
-webkit-transition:ease-out 0.2s;
transition:ease-out 0.2s;
}
/**设置需要旋转的元素**/
.toptitle .spliteTitle:hover
{
/**180°旋转**/
transform:rotate(180deg) scale(1.2);
-moz-transform:rotate(180deg) scale(1.2);
-o-transform:rotate(180deg) scale(1.2);
-webkit-transform:rotate(180deg) scale(1.2);
background-color: #9b5850;
}
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
语法：transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | 规定速度效果的速度曲线。 |
| transition-delay | 定义过渡效果何时开始。 |
http://www.w3school.com.cn/cssref/pr_transition.asp
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
http://www.w3school.com.cn/cssref/pr_transform.asp
