解決圖片旋轉之后的位置問題

     .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屬性補回偏移量   但是用的相對視距單位就好 避免產生別的影響