南順網絡
css動畫
一(yī).摩天輪旋轉動畫
.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
