基本语法transform

接着看日落

于 2023-09-24 19:28:47 发布

阅读量102

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2301_77161151/article/details/133249068

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           h1 {
               width: 100px;
               text-shadow: 5px 5px 5px #FF0000;
               /* overflow: hidden; */
               /* white-space: nowrap; */
               /* text-overflow: ellipsis; */
               /* 换行方式 */
               /* word-wrap:break-word; */
               /* 对单词换行 */
               word-break: keep-all;
           }
           /* @font-face {
           font-family: myFirstFont;
           src: url(sansation_light.woff);
           }
           .box{
           font-family:myFirstFont;
           } */
           .box1 {
               width: 200px;
               height: 200px;
               background-color: pink;
               font-size: 30px;
               transition: 1s;
               /* transform: translate(0px,0px); */
           }
       </style>
   </head>
   <body>
       
       <h1>hello word</h1>
       <div>111111</div>
       <div class="box">222222</div>
       
       
       
       <button type="button" οnclick="func1()">按钮1</button>
       <button type="button" οnclick="func2()">按钮2</button>
       <div class="box1">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(0px)";
       }
       function func2(){
           // box1.style.transform = "translate(0px,0px)";
           box1.style.transform = "translateX(0px)";
           box1.style.transform = "translateY(300px)";
       }
   </script>
</html>