Transform Origin

Defines the position of a transformed element.

Classes
Class Properties
origin-center transform-origin: center;
origin-top transform-origin: top;
origin-top-right transform-origin: top right;
origin-right transform-origin: right;
origin-bottom-right transform-origin: bottom right;
origin-bottom transform-origin: bottom;
origin-bottom-left transform-origin: bottom left;
origin-left transform-origin: left;
origin-top-left transform-origin: top left;
Examples
primeflex
primeflex
primeflex
primeflex

<div class="card flex flex-wrap align-items-center justify-content-center md:justify-content-between" style="min-height: 200px">
    <div class="w-5rem h-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/product-placeholder.svg" class="origin-center rotate-45 w-5rem h-5rem" alt="primeflex">
    </div>
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/product-placeholder.svg" class="origin-top-right rotate-45 w-5rem h-5rem" alt="primeflex">
    </div>
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/product-placeholder.svg" class="origin-bottom-left rotate-45 w-5rem h-5rem" alt="primeflex">
    </div>
    <div class="h-5rem w-5rem shadow-1 bg-blue-100 m-5">
        <img src="../../assets/images/product-placeholder.svg" class=" origin-left rotate-45 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:origin-center 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" style="min-height: 200px">
    <div class="h-5rem w-5rem shadow-1 bg-blue-100">
        <img src="../../assets/images/product-placeholder.svg" class="origin-top-right md:origin-bottom-left rotate-45 w-5rem h-5rem" alt="primeflex">
    </div>
</div>