translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转</title>
 7     <style type="text/css">
 8     *{
 9         font: 14px/1.5em 'dhnblog';
10         font-weight: bold;
11         margin: 0;
12         padding: 0;
13     }
14     @font-face {
15             font-family: dhnblog;
16             src: url(images/fzm.tff);
17         }
18     /*translate移动坐标*/
19     div.box2{
20         transform: translate(50px,10px);
21         /*translate效果看起来和相对差不多，不过relativ定位是脱离文档流，translate没有*/
22     }
23     .box1{
24         position: relative;
25         top: 100px;
26         left: 100px;
27         z-index: 2;
28     }
29     .box4,#box4{
30         width: 300px;
31         height: 300px;
32         border-radius: 300px;
33         background-color: lawngreen;
34         overflow: hidden;
35     }
36     #box4{
37         transform:rotate(20deg);
38     }
39     </style>
40     <script src='jquery.min.js'>
41     // jquery.min.js链接：https://pan.baidu.com/s/19N_M6A9j2HRBtr2AunUVZA 提取码：6cmt 
42     </script>
43 </head>
44 <body>
45     <div class="box1">明天的明天我们会在哪里如果我看过你看过的世界,走过你走过的路,是不是就能更靠近你一点</div>
46     <div class="box2"><img src="images/ft.png" alt=""></div>
47     <div class="box3">明日、明日はどこにいるのかあなたが見た世界を見て、あなたが旅したように歩いたなら、私はあなたに近づくことができますか</div>
48     <div class="box4" id="box4">
49         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582457422625&di=080bd248e8c221394c53636f2279ef9b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180718%2Fdfbb8c2e141044278de441028a8ed6f3.jpeg" alt="">
50     </div>
51 </body>
52 <!-- rotate实现2D自动旋转 -->
53 <script>
54     $('.box4').click(function(){
55         s=0;
56         v=-10;
57         obj=$(this);
58         setInterval(function(){
59             s+=v;
60             obj.css({'transform':'rotate('+s+'deg)'});
61         },100);
62     });    
63     </script>
64 
65 <!-- translate和rotate实现2D旋转 -->
66 <!-- <script>
67     $('#box4').click(function(){
68         s=0;
69         v=10;
70         obj=$(this);
71         setInterval(function(){
72             s+=v;
73             obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'});
74         },10);
75     });    
76     </script> -->
77 </html>
translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转

猜你喜欢
