前端html5课堂笔记

最新推荐文章于 2024-07-25 09:24:40 发布

hj286251

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量25

点赞数

文章标签：前端 html5 笔记

本文链接：https://blog.csdn.net/hj286251/article/details/135190785

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .box1 {
               width: 200px;
               height: 200px;
               background-color: pink;
               font-size: 30px;
               transition: 1s;
               margin: 200px auto 0 auto;
               /* transform: translate(0px,0px); */
           }
           .box2 {
               width: 200px;
               height: 200px;
               background-color: orange;
               font-size: 30px;
               transition: 1s;
               margin: 0 auto;
               /* transform: translate(0px,0px); */
           }
       </style>
   </head>
   <body>
       
       <button type="button" οnclick="func1()">按钮1</button>
       <button type="button" οnclick="func2()">按钮2</button>
       <div class="box1">123123123</div>
       <div class="box2">123123123</div>
   </body>
   <script type="text/javascript">
       var box1 = document.getElementsByClassName("box1")[0];
       function func1(){
           // box1.style.transform = "translate(200px,200px)";
           // box1.style.transform = "translateX(300px)";
           // box1.style.transform = "translateY(100px)";
           // box1.style.transform = "rotate(30deg)";
           // box1.style.transform = "rotateX(30deg)";
           // box1.style.transform = "rotateY(60deg)";
           // box1.style.transform = "scale(0.5,1)";
           // box1.style.transform = "skew(30deg,90deg)";
           // box1.style.transform = "matrix(1,0,0,1,0,1)";
           box1.style.transform = "rotate(30deg)";
           box1.style.transformOrigin = "150% 0%";
       }
       function func2(){
           // box1.style.transform = "translate(0px,0px)";
           // box1.style.transform = "translateX(0px)";
           // box1.style.transform = "translateY(300px)";
           // box1.style.transform = "rotateY(90deg)";
           // box1.style.transform = "scale(1,1)";
           box1.style.transform = "skew(90deg,60deg)";
       }
   </script>
</html>