Image not rotating in CSS - html

Question

I am having trouble getting my image to rotate. I have tried using the image rotate property in CSS but that doesn't seem to have don the trick. The elements above the image are floated elements. I'm not sure if they might be interfering with the image in some way.
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

The credit should go to #zsawaf, but to answer this question. Indicated in the comments image-orientation is only for firefox browsers.
Instead in your css file use:
transform: rotate(90deg);

Answer 2

You need to use "transform: rotate()" instead of image-orientation;
So the css for your image should look like this;
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 is an experimental feature with limited browser support.