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>
