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

发布时间:2020-11-19 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
 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>

总结


以上是前端之家为你收集整理的translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转全部内容,希望文章能够帮你解决translate移动坐标,rotate实现2D自动旋转,translate和rotate实现2D旋转所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。