Rotate

Rotates the element around its transform-origin. A positive angle turns clockwise, as on the web.

Valid values are:

• none
• A single angle, which turns around the Z-axis: 45deg, 1.2rad, 0.5turn etc.
• An axis keyword and an angle: x 45deg, y 0.25turn, z 90deg
• An axis vector and an angle: 1 1 0 45deg
• Three angles in the form eulerX eulerY eulerZ, which is ReactUnity’s own older spelling: 45deg 60deg 360deg

rotate3d() in transform takes an axis and an angle the same way: rotate3d(1, 1, 0, 45deg).

.items {
  flex-direction: column;
  align-self: flex-start;
  margin: 100px auto;
  border: 1px solid gray;
}

.item {
  width: 100px;
  height: 100px;
  background-color: coral;

  animation: rotateAnim 5s infinite;
}

@keyframes rotateAnim {
  0% {
    rotate: 1;
  }

  20% {
    rotate: 30deg;
  }

  40% {
    rotate: 1.2rad;
  }

  60% {
    rotate: 0.625turn;
  }

  80% {
    rotate: 1 1 0 0.625turn;
  }

  100% {
    rotate: 1;
  }
}