CSS如何把一張橫向的長圖變成豎向的？

前言：

有時候做項目過程中，設計的是一張橫向的長圖，但是我們需要在手機端觀看的時候，也想把手機橫着觀看，這樣視野更寬闊，如何解決這個問題呢？

html

 <div class="imgBox">

 </div>

css

.imgBox {
        height: 3.75rem;
        width: 6.67rem;
        background-image: url('../images/bigBg.jpg');
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position-x: 0%;
        background-position-y: 0%;
        transform-origin: 0% 0%;
        transform: rotate(90deg) translateY(-100%);
    }

說明：

1、imgBox設置成橫向長圖的大小，然后把長圖設置成背景圖片，這里尤其注意 background-size: auto 100%; 的設置，第一個auto代表寬度自適應，第二個值代表高度和父元素高度一樣100%。

2、因為要把長圖豎向立起來看，所以先要向右轉90度，當然這個轉向的中心選為左上角，然后再向Y軸向右移動本身的高度100%；  transform: rotate(90deg) translateY(-100%);