图像不在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是有限的浏览器支持的实验性功能。