Rotate Images in Quarto

Question

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.

Answer 1

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.