html5--6-56 阶段练习5-翻转效果
学习要点
- 运用所学过的知识完成一个简单的小练习，理解对动画的应用。
1 @charset="UTF-8"; 2 *{ 3 margin:0; 4 padding:0; 5 } 6 img{ 7 width: 150px; 8 height: 210px; 9 border: 3px groove orange; 10 } 11 12 div{ 13 width: 150px; 14 margin-left: auto; 15 margin-right: auto; 16 margin-top: 50px; 17 animation: fz 6s infinite; 18 } 19 20 body{ 21 perspective: 500px; 22 } 23 @keyframes fz{ 24 25 0%{ 26 transform: rotateY(45deg); 27 } 28 29 30 20%{ 31 transform: rotateY(180deg); 32 } 33 34 35 40%{ 36 transform: rotateY(360deg); 37 } 38 39 40 60%{ 41 transform: rotateX(45deg); 42 } 43 44 80%{ 45 transform: rotateX(180deg); 46 } 47 48 90%{ 49 transform: rotateX(360deg); 50 } 51 52 100%{ 53 transform: rotateX(360deg); 54 } 55 }
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>6-56课堂演示</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div> 10 <img src="../img/sc17.png" alt=""> 11 </div> 12 </body> 13 </html>