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>