让整个页面旋转180度

最新推荐文章于 2023-12-29 10:36:50 发布

原创最新推荐文章于 2023-12-29 10:36:50 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

web 同时被 2 个专栏收录

20 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍了一种使用CSS3的transform功能和JavaScript实现签字板页面180度旋转的方法，同时确保画板部分的canvas正常工作，避免坐标偏移，通过动画过渡提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做了个签字板，现在使用APAD，工作人员和客户经常要转来转去屏幕，解决这个问题，就是让页面旋转180度。

CSS3的transform功能实现旋转，再配合transition实现动画。

先旋转整个页面，再把画板部分canvas转回去，不然写字的时候，坐标就偏了。

CSS:

<style>
      .rotate{-webkit-transform:rotate(180deg);-webkit-transition:-webkit-transform 1s;}
      .re_rotate{-webkit-transform:rotate(0deg);-webkit-transition:-webkit-transform 1s;}
   </style>

JS:

$(".event_rotate").click(function () {
             if($("html").hasClass("rotate")){
                 $("html").addClass("re_rotate");
                 $("canvas").addClass("re_rotate");
                 $("html").removeClass("rotate");
                 $("canvas").removeClass("rotate");
             }
             else{
                 $("html").removeClass("re_rotate");
                 $("canvas").removeClass("re_rotate");
                 $("html").addClass("rotate");
                 $("canvas").addClass("rotate");
             }

         });