html - 图像不在 CSS 中旋转

Question

我无法旋转图像。我曾尝试在 CSS 中使用图像旋转属性，但这似乎并没有成功。图像上方的元素是 float 元素。我不确定它们是否会以某种方式干扰图像。

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);