Comparing Rotate 90 to Rotate 90

Comparing

“Rotate 90” (target)

“Rotate 90” (base)

Mike Bostock

Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.

Workspace

Published unlisted

Edited

Oct 17, 2019

Changed in target

-
html`
<div class="container"> 
   <div class="rotate_90">
<img src="https://s3.amazonaws.com/c.loud/11-sandisfield/images/downstairs/office/20191004_130006.jpg" id="rotate_90">
</div>
</div>
`
+
new Promise((resolve, reject) => {
  const image = new Image;
  image.onerror = reject;
  image.onload = () => {
    const canvas = document.createElement("canvas");
    canvas.style.maxWidth = "100%";
    canvas.width = image.naturalHeight;
    canvas.height = image.naturalWidth;
    const context = canvas.getContext("2d");
    context.translate(image.naturalHeight, 0);
    context.rotate(Math.PI / 2);
    context.drawImage(image, 0, 0);
    resolve(canvas);
  };
  image.src = "https://s3.amazonaws.com/c.loud/11-sandisfield/images/downstairs/office/20191004_130006.jpg";
})

Removed in target

{
var id = 'rotate_90';//The ID of the <img> element to rotate
var deg = 90;//The rotation angle, in degrees
document.getElementById(id).style = 'transform: rotate(' + deg + 'deg)';
}