1 <!DOCTYPE html> 2 <html lang="en" 3 head 4 meta charset="UTF-8" 5 name="viewport" content="width=device-width,initial-scale=1.0" 6 title>translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转</ 7 style type="text/css" 8 *{ 9 font: 14px/1.5em 'dhnblog'; 10 font-weight bold11 margin 012 padding13 } 14 @font-face 15 font-family dhnblog16 src url(images/fzm.tff)17 18 /*translate移动坐标*/ 19 div.box220 transform translate(50px,10px)21 translate效果看起来和相对差不多,不过relativ定位是脱离文档流,translate没有22 23 .box124 position relative25 top 100px26 left27 z-index 228 29 .box4,#box430 width 300px31 height32 border-radius33 background-color lawngreen34 overflow hidden35 36 #box437 rotate(20deg)38 39 style40 script src='jquery.min.js'41 // jquery.min.js链接:https://pan.baidu.com/s/19N_M6A9j2HRBtr2AunUVZA 提取码:6cmt 42 script43 44 body45 div class="box1">明天的明天我们会在哪里如果我看过你看过的世界,走过你走过的路,是不是就能更靠近你一点div46 ="box2"><img ="images/ft.png" alt=""></47 ="box3">明日、明日はどこにいるのかあなたが見た世界を見て、あなたが旅したように歩いたなら、私はあなたに近づくことができますか48 ="box4" id="box4"49 ="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"50 51 52 <!-- rotate实现2D自动旋转 --> 53 54 $('.box4).click(function(){ 55 s=0; 56 v=-1057 obj$(this); 58 setInterval(59 s+=v; 60 obj.css({transformrotate(+sdeg)}); 61 },10062 }); 63 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 75 76 </script> 77 html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。