Rotate

Rotates an element based on a given degree.

Classes
Class Properties
rotate-90 transform: rotate(90deg);
-rotate-90 transform: rotate(-90deg);
rotate-180 transform: rotate(180deg);
-rotate-180 transform: rotate(-180deg);
Examples
primeflex
primeflex
primeflex
primeflex

<div class="card flex flex-wrap align-items-center justify-content-center md:justify-content-between">
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/rotate-placeholder.svg" class="rotate-90 w-5rem h-5rem" alt="primeflex">
    </div>
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/rotate-placeholder.svg" class="-rotate-90 w-5rem h-5rem" alt="primeflex">
    </div>
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/rotate-placeholder.svg" class="rotate-180 w-5rem h-5rem" alt="primeflex">
    </div>
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/rotate-placeholder.svg" class="-rotate-180 w-5rem h-5rem" alt="primeflex">
    </div>
</div>

Responsive

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:rotate-90 to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens e.g monitors
primeflex

<div class="card flex align-items-center justify-content-center">
    <div class="h-10rem w-10rem shadow-1 bg-blue-100">
        <img src="../../assets/images/rotate-placeholder.svg" class="rotate-90 md:-rotate-90 w-10rem h-10rem" alt="primeflex">
    </div>
</div>