图像不在CSS中旋转

问题描述：

我无法让图像旋转。我曾尝试在CSS中使用图像旋转属性，但似乎没有把握。图片上方的元素是浮动元素。我不确定他们是否会以某种方式干扰图像。图像不在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>

为什么不使用transform：rotate（90deg）？ – zsawaf

[image-orientation]（https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation）仅适用于Firefox。使用变换（如@zsawaf所示）而不是 –

哦，太好了。谢谢 –

答

信贷应该去@zsawaf，而是要回答这个问题。注释中的图片方向仅适用于Firefox浏览器。

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

transform: rotate(90deg);

答

你需要使用 “变换：旋转（）”，而不是像定向;

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

图像不在CSS中旋转

相关推荐