Rotation test

always forget how to rotate images

by Hannah McFarlane

HTML

<div class="viewport">

  <div class="plate-vertical-rw">

    <table>
      <tr>
        <td><img src="http://i.imgur.com/raJnRoI.jpg" width="100%"></td>
      </tr>
      <tr>
        <td>Table caption</td>
      </tr>

    </table>
  </div>
</div>

<!-- <table>
<tr>
<td><img src="http://i.imgur.com/raJnRoI.jpg" height="200px"></td></tr>
<tr><td>Table caption</td></tr>

</table> -->

CSS

.viewport {
  border: 2px dashed red;
  height: 300px;
  width: 300px;
}

.plate-vertical-rw {
  transform: rotate(-90deg) translate(-50%, -50%);
  width: 200px;
  /* margin-top: 100px; */
  /* padding-right: 100px; */
  border: 2px dotted blue;
  position: static;
  transform-origin: top center;
  /* vertical-align: middle; */
}

.plate-vertical-rw table {
  display: block;
  margin-top: 0;
  border: 1px solid black;
  border-collapse: collapse;
}

.plate-vertical-rw table td {
  /*height: 571.44pt;*/
  width: 200px;
  /*text-align: center;*/
  /*vertical-align: middle !important;*/
}