html5提供了3d动画功能:animation,@keyframes,translate3d
rotate的使用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nearth</title>
<style type="text/css">
img{
width:10%;
animation: car 10s infinite;
}
@keyframes car{
0%{transform: translate3d(0,0,0);}
20%{transform: translate3d(1000px,0,0);}
40%{transform: translate3d(0,1000px,0);}
60%{transform: translate3d(0,0,1000px);}
80%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<img src="001.jpg" >
</body>
</html>