代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Rotate 转动动画测试</title> <style type="text/css"> .box{ width:280px; height:280px; background-color:#FF0; } .tran{ transform:rotate(30deg) scale(0.5,0.3); } .reset{ transform:rotate(0deg) scale(1,1); } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".btn1").click(function(){ $(".box").removeClass("reset"); $(".box").addClass("tran"); }); $(".btn2").click(function(){ $(".box").removeClass("tran"); $(".box").addClass("reset"); }); }); </script> </head> <body> <div class="box"></div> <button class="btn1">变化</button> <button class="btn2">重置</button> </body> </html>
课后作业:
1.复制上述代码,预览查看效果。
2.读懂上述代码。