⌘ K
esc

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