<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转</title>
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>