解决图片旋转之后的位置问题

     .img{
      width: 18rem;
      height: 80vw;
      background-repeat: no-repeat;
      background-position: top;
      background-size: 12rem auto;
      position: relative;
      overflow: hidden;
      -webkit-transform: rotate(-90deg) translate(5.5rem, 20vw);
      transform: rotate(-90deg) translate(5.5rem, 20vw);
    }

　　

 <div className="img" style = {{ backgroundImage: 'url('+ signUrl +')',backgroundRepeat:'no-repeat',backgroundPosition:'center',backgroundSize: 'auto 100%'}}/> 

 

            原因解释：因为图片旋转90度之后相对的宽高其实是发生了互换，会对超出之前约束的方框，此处代码运用的地方是签名图片，将竖屏的图片改变成横屏的，所以需要旋转之后在改变宽高，但是带来的影响是，之前定义的宽度依旧会对高度产生左右，所以直接换的话会让图片位置发生相对偏移，偏移量  是   x=h（定义的宽度）- h(定义的高度);

         解决办法；用css3的translate属性补回偏移量   但是用的相对视距单位就好 避免产生别的影响