CSS3学习 动画之rotate3d，很炫酷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@-webkit-keyframes lll {
0%{
-webkit-transform: rotate3d(180,180,180,90deg);
-moz-transform: rotate3d(180,180,180,90deg);
-o-transform: rotate3d(180,180,180,90deg);
}
100%{
-webkit-transform: rotate3d(80,80,80,135deg);
-moz-transform: rotate3d(80,80,80,135deg);
-o-transform: rotate3d(80,80,80,135deg);
}
}
#hello{
width: 300px;
height: 400px;
background-color: #646464;
-webkit-transition: all 3s linear;
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
}
#hello{
-webkit-animation-name:lll;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
background-color: green;
}
</style>
</head>
<body>
<div id="hello"></div>
记得兼容性问题
</body>
</html>
