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#

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

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

<div class="flex align-items-center justify-content-center" style="min-height: 250px">
    <div class="h-6rem w-6rem bg-primary border-round">
        <img src="/images/product-placeholder-yellow.svg" class="origin-top-right md:origin-bottom-left rotate-45 h-6rem w-6rem" alt="primeflex">
    </div>
</div>