<!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); }}}