Translate

Moves an element along the x and y axis.

Classes#

Class	Properties
translate-x-0	transform: translateX(0%);
translate-x-100	transform: translateX(100%);
-translate-x-100	transform: translateX(-100%);
translate-y-0	transform: translateY(0%);
translate-y-100	transform: translateY(100%);
-translate-y-100	transform: translateY(-100%);

Examples#

<div class="flex flex-wrap align-items-center justify-content-center md:justify-content-between">
    <div class="h-6rem w-6rem bg-primary border-round-left">
        <img src="/images/product-placeholder-blue.svg" class="translate-x-100 h-6rem w-6rem" alt="primeflex">
    </div>
    <div class="h-6rem w-6rem bg-primary">
        <img src="/images/product-placeholder-blue.svg" class="translate-x-0 h-6rem w-6rem" alt="primeflex">
    </div>
    <div class="h-6rem w-6rem bg-primary border-round-right">
        <img src="/images/product-placeholder-blue.svg" class="-translate-x-100 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:translate-x-0 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">
    <div class="h-6rem w-6rem bg-primary border-round-left">
        <img src="/images/product-placeholder-yellow.svg" class="-translate-x-100 md:translate-x-100 w-6rem h-6rem" alt="primeflex">
    </div>
</div>