ContextQMD
Back to Tailwindcss

Translate

src/docs/translate.mdx

latest22.2 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";

export const title = "translate"; export const description = "Utilities for translating elements.";

<ApiTable rows={[ ...[ ["translate", true, true], ["translate-x", true, false], ["translate-y", false, true], ].flatMap(([prefix, x, y]) => { const css = (value) => ["translate:", x ? value : "var(--tw-translate-x)", y ? value : "var(--tw-translate-y)"].join(" ").concat(";"); return [ [${prefix}-<number>, css("calc(var(--spacing) * <number>)")], [-${prefix}-<number>, css("calc(var(--spacing) * -<number>)")], [${prefix}-<fraction>, css("calc(<fraction> * 100%)")], [-${prefix}-<fraction>, css("calc(<fraction> * -100%)")], [${prefix}-full, css("100%")], [-${prefix}-full, css("-100%")], [${prefix}-px, css("1px")], [-${prefix}-px, css("-1px")], [${prefix}-(<custom-property>), css("var(<custom-property>)")], [${prefix}-[<value>], css("<value>")], ]; }), [translate-z-<number>, translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number>);], [ -translate-z-<number>, translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * -<number>);, ], [translate-z-px, translate: var(--tw-translate-x) var(--tw-translate-y) 1px;], [-translate-z-px, translate: var(--tw-translate-x) var(--tw-translate-y) -1px;], [ translate-z-(<custom-property>), translate: var(--tw-translate-x) var(--tw-translate-y) var(<custom-property>);, ], [translate-z-[<value>], translate: var(--tw-translate-x) var(--tw-translate-y) <value>;], ["translate-none", "translate: none;"], ]} />

Examples

Using the spacing scale

Use translate-<number> utilities like translate-2 and -translate-4 to translate an element on both axes based on the spacing scale:

<Figure> <Example> { <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible"> <div className="flex shrink-0 items-center justify-around gap-4 p-8 pb-12 font-mono font-bold"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> -translate-6 </p> <div className="relative"> <div className="absolute inset-0"> 
        </div>
        <div className="relative z-10 -translate-6">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">translate-2</p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-2">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">translate-8</p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-8">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:-translate-6,translate-2,translate-8] -->
</Figure>

Using a percentage

Use translate-<fraction> utilities like translate-1/4 and -translate-full to translate an element on both axes by a percentage of the element's size:

<Figure> <Example> { <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible"> <div className="flex shrink-0 items-center justify-around gap-4 p-8 pb-12 font-mono font-bold"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> -translate-1/4 </p> <div className="relative"> <div className="absolute inset-0"> 
        </div>
        <div className="relative z-10 -translate-1/4">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-1/6
      </p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-1/6">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-1/2
      </p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-1/2">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:-translate-1/4,translate-1/6,translate-1/2] -->
</Figure>

Translating on the x-axis

Use translate-x-<number> or translate-x-<fraction> utilities like translate-x-4 and translate-x-1/4 to translate an element on the x-axis:

<Figure> <Example> { <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible"> <div className="flex shrink-0 items-center justify-around gap-4 p-8 pb-12 font-mono font-bold"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> -translate-x-4 </p> <div className="relative"> <div className="absolute inset-0"> 
        </div>
        <div className="relative z-10 -translate-x-4">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-x-2
      </p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-x-2">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-x-1/2
      </p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-x-1/2">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:-translate-x-4,translate-x-2,translate-x-1/2] -->
</Figure>

Translating on the y-axis

Use translate-y-<number> or translate-y-<fraction> utilities like translate-y-6 and translate-y-1/3 to translate an element on the y-axis:

<Figure> <Example> { <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible"> <div className="flex shrink-0 items-center justify-around gap-4 p-8 pb-12 font-mono font-bold"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> -translate-y-4 </p> <div className="relative"> <div className="absolute inset-0"> 
        </div>
        <div className="relative z-10 -translate-y-4">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-y-2
      </p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-y-2">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-y-1/2
      </p>
      <div className="relative">
        <div className="absolute inset-0">
          
        </div>
        <div className="relative z-10 translate-y-1/2">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:-translate-y-4,translate-y-2,translate-y-1/2] -->
</Figure>

Translating on the z-axis

Use translate-z-<number> utilities like translate-z-6 and -translate-z-12 to translate an element on the z-axis:

<Figure> <Example> { <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible"> <div className="flex shrink-0 items-center justify-around gap-4 p-8 pb-12 font-mono font-bold"> <div className="flex shrink-0 flex-col items-center"> <p className="mb-12 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> -translate-z-8 </p> <div className="relative rotate-x-50 rotate-z-45 transform-3d"> <div className="absolute inset-0 overflow-y-hidden rounded-lg backdrop-blur-sm"> 
        </div>
        <div className="relative z-10 -translate-z-8">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-12 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-z-4
      </p>
      <div className="relative rotate-x-50 rotate-z-45 transform-3d">
        <div className="absolute inset-0 overflow-y-hidden rounded-lg">
          
        </div>
        <div className="relative z-10 translate-z-4">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
    <div className="flex shrink-0 flex-col items-center">
      <p className="mb-12 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
        translate-z-12
      </p>
      <div className="relative rotate-x-50 rotate-z-45 transform-3d">
        <div className="absolute inset-0 overflow-y-hidden rounded-lg">
          
        </div>
        <div className="relative z-10 translate-z-12">
          
          <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
        </div>
      </div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:transform-3d,-translate-z-8,translate-z-2,translate-z-1/2] -->
<div class="transform-3d">
  
  
  
</div>
</Figure>

Note that the translate-z-<number> utilities require the transform-3d utility to be applied to the parent element.

Using a custom value

<UsingACustomValue element="img" elementAttributes={{ src: "/img/mountains.jpg" }} utility="translate" value="3.142rad" name="translation" />

Responsive design

<ResponsiveDesign element="img" elementAttributes={{ src: "/img/mountains.jpg" }} property="translate" defaultClass="translate-45" featuredClass="translate-60" />