南顺网络
css动画
一.摩天轮旋转动画
.ro{ animation:name 120s linear infinite;
-webkit-animation:name 120s linear infinite;}
@keyframes name{
form{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}
@-webkit-keyframes name{
form{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
二.旋转Y轴
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3</title>
<style>
#main{padding:50px 0; background:#07ad87; height:100px;}
.div1
{
width:20%;
transition:transform 1.5s;
float:left;
text-align:center;
}
.div1 p{ display:none;transform:rotateY(180deg);transition:transform 1s; color:#fff;}
.div1 a{transition:transform 1s;}
.div1:hover
{
transform:rotateY(180deg);
}
&
编辑:--ns868
