Search code examples
rquartoreveal.js

Rotate Images in Quarto

This will hopefully be a simple question for anyone mildly competent in the CSS that undergirds Quarto presentations (not me). How do I rotate an image? In my fantasy world, something like ![](graphics/statehouse.jpg){.absolute height=300 rotate=30} would have worked, where rotate=30 would mean "rotate 30 degrees clockwise." Alas, that does not exist.

Solution

  • Try with CSS directly,

    ---
title: Rotate Images
format: revealjs
css: style.css
---

## First Slide

::: rotate-img

![](dog.jpg){.absolute height=300}

:::

    style.css

    .rotate-img img {
  transform: rotate(40deg);
}

    Wrap any image with the pandoc div rotate-img to get 40 deg clockwise rotation.