弹窗中图片的旋转样式问题

弹窗中图片的旋转样式问题

目前主要js使用的旋转大多为css样式transform, css3，以及cavas,这里主要讲的使用css的属性实现的旋转功能，由于笔者当时在网上未能找到答案，故事后解决问题了分享下经验。

背景

该需求是要在一个弹窗中做一个图片旋转功能，并且在title上需要能够展示内容。

弹窗使用的是dialog查件，思路是在关闭按钮的旁边加上旋转的按钮，每次点击后让弹窗里面的图片旋转90°，旋转的代码如下

var dialog = bootbox.dialog({
   title: "<span class='modal-title m-r-sm'>"+预览+"</span>"+showStr+"<a style='float: right' class='glyphicon glyphicon-repeat m-r-sm rotate' href='javascript:;'></a>",
          size:'large',
          message: '<img class="img-responsive rotateImg" data-rotate="0" style="margin: 0 auto transform: rotate(0deg)" src="'+this.src+'"/>'
      }).on('click','.rotate',function(e){
          var rotateIndex = Number($('.rotateImg').data('rotate'));
          rotateIndex++;
          var rotateAdd = rotateIndex*90;
          $('.rotateImg').data('rotate',rotateIndex);
          var img = dialog.find('.modal-body img');
          img.css({
              transform: 'rotate('+rotateAdd+'deg)'
          });
      })

给img添加了data属性，用于记录旋转次数，初始为0，旋转一次后为1，以此类推…，这里展示旋转一次后的结果。

问题来了，旋转后的图片脱离了原来所占区域，不仅如此，还将上图红框中区域遮挡住了（如果里面有其他内容，可能产生bug）， 怎么办？ 直观的办法是将图片往下移，将遮挡的部分挪下来即可，可是如何实现？ 旋转的基本逻辑是有个旋转中心，X,Y,Z轴，2维下没有Z轴，默认图示

旋转90°后图示，

所以通过改变旋转中心是行不通的，那么如果使用定位可行吗？既然有想法就要采取行动，这个在没有思路的时候很好用。

根据上图不难发现，只有在旋转出现90°和它的倍数角度在可能出现超出的情况，所以这里要想判断下，然后对比0°和90°区别，这里将两个示例图重合

上代码

var dialog = bootbox.dialog({
     title: "<span class='modal-title m-r-sm'>"+LANG._CUSTOMER_RULE_PREVIEW_+"</span>"+showStr+"<a style='float: right' class='glyphicon glyphicon-repeat m-r-sm rotate' href='javascript:;'></a>",
      size:'large',
      message: '<img class="img-responsive rotateImg" data-rotate="0" style="margin: 0 auto transform: rotate(0deg)" src="'+this.src+'"/>'
  }).on('click','.rotate',function(e){
      var rotateIndex = Number($('.rotateImg').data('rotate'));
      rotateIndex++;
      var rotateAdd = rotateIndex*90;
      $('.rotateImg').data('rotate',rotateIndex);
      var img = dialog.find('.modal-body img');
      img.css({
          transform: 'rotate('+rotateAdd+'deg)'
      });
      if(rotateIndex%2 !== 0){  // 新增的逻辑
          var rotateH = img.width()/2 - img.height()/2;
          img.css({
              position: 'absolute',
              top: rotateH
          })
      }else{
          img.css({
              position: 'absolute',
              top: 0,
              left: 0
          })
      }
  })

问题成功解决，看下效果

主要问题解决，哈哈哈！剩下的解决下弹窗样式就OK了。