html5css练习 旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转菜单</title>
<link rel="stylesheet" href="style7.css" type="text/css">
</head>
<body>
<div>
<img src="pic/sc17.png" alt="">
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
img{
width: 150px;
height: 210px;
border: 3px groove orange;
}
div{
margin-left: auto;
margin-right: auto;
width: 150px;
margin-top: 50px;
animation: fz 6s infinite ease;
}
body{
perspective:500px;
}
@keyframes fz{
0%{
transform: rotateX(45deg);
}
20%{
transform: rotateX(180deg);
}
40%{
transform: rotateX(360deg);
}
60%{
transform: rotateY(45deg);
}
80%{
transform: rotateY(180deg);
}
90%{
transform: rotateY(360deg);
}
100%{
transform: rotateY(360deg);
}
}
}
