rotate()

transform: rotate(0);

transform: rotate(90deg);

transform: rotate(-0.25turn);

transform: rotate(3.142rad);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

rotate(a)

<div>Normal</div>
<div class="rotated">Rotated</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}
.rotated {
  transform: rotate(45deg); /* rotateZ(45deg) と等価 */
  background-color: pink;
}

<div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>

div {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 100px;
  height: 100px;
  background-color: lightgray;
}
.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}
.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}
.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
}