圖像不在CSS中旋轉

Question

我無法讓圖像旋轉。我曾嘗試在CSS中使用圖像旋轉屬性，但似乎沒有把握。圖片上方的元素是浮動元素。我不確定他們是否會以某種方式干擾圖像。

body { 
 
    margin: 0; 
 
} 
 

 
h1, 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
#wrapper { 
 
    background: #eee; 
 
    max-width: 60%; 
 
    margin: 0 auto; 
 
    overflow: auto; 
 
} 
 

 
.float { 
 
    align-content: center; 
 
    margin: 2.5%; 
 
    max-width: 20%; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: #eee; 
 
} 
 

 
img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    clear: both; 
 
    max-width: 70%; 
 
    image-orientation: 90deg; 
 
}

<h1>Postioning Practice</h1> 
 
<h2>Using Floated Elements</h2> 
 

 
<div id="wrapper"> 
 
    <div class="float"> 
 
    <h3>Position 1</h3> 
 
    <p></p> 
 
    </div> 
 

 
    <div class="float"> 
 
    <h3>Position 2</h3> 
 
    <p>.</p> 
 
    </div> 
 

 
    <div class="float"> 
 
    <h3>Position 3</h3> 
 
    <p></p> 
 
    </div> 
 

 
    <div class="float"> 
 
    <h3>Position 4</h3> 
 
    <p>.</p> 
 
    </div> 
 

 
    <a href="yingCake.jpeg"> 
 
    <img src="yingCake.jpeg" alt="Image of Ying eating cake"> 
 
    </a> 
 
</div>

Answer 1

信貸應該去@zsawaf，而是要回答這個問題。註釋中的圖片方向僅適用於Firefox瀏覽器。

而是在你的CSS文件中使用：

transform: rotate(90deg); 

Answer 2

你需要使用 「變換：旋轉（）」，而不是像定向;

因此，您的圖像的CSS應該看起來像這樣;

img { 
    display: block; 
    margin: 0 auto; 
    clear: both; 
    max-width: 70%; 
    transform: rotate(90deg); 
} 

<h1>Postioning Practice</h1> 
<h2>Using Floated Elements</h2> 

<div id="wrapper"> 
    <a href="yingCake.jpeg"> 
    <img src="yingCake.jpeg" alt="Image of Ying eating cake"> 
    </a> 
</div> 

image-orientation是有限的瀏覽器支持的實驗性功能。