new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

transform/translate

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

translate-y utility class syntax and CSS output

The translate-y utilities generate CSS using the translate property, affecting only the y-axis. translate-y-<number> produces translate: var(--tw-translate-x) calc(var(--spacing) * <number>); translate-y-<fraction> produces translate: var(--tw-translate-x) calc(<fraction> * 100%); translate-y-full produces translate: var(--tw-translate-x) 100%; translate-y-px produces translate: var(--tw-translate-x) 1px; translate-y-<custom-property> produces translate: var(--tw-translate-x) var(<custom-property>); translate-y-[<value>] produces translate: var(--tw-translate-x) <value>;. The negative variants use corresponding negative values.

translate-z utility class syntax and CSS output

The translate-z utilities generate CSS using the 3D translate property. translate-z-<number> produces translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number>); -translate-z-<number> produces translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * -<number>); translate-z-px produces translate: var(--tw-translate-x) var(--tw-translate-y) 1px; -translate-z-px produces translate: var(--tw-translate-x) var(--tw-translate-y) -1px; translate-z-<custom-property> produces translate: var(--tw-translate-x) var(--tw-translate-y) var(<custom-property>); translate-z-[<value>] produces translate: var(--tw-translate-x) var(--tw-translate-y) <value>;.

translate-z requires transform-3d on parent element

The translate-z utilities require the transform-3d utility to be applied to the parent element in order to work properly.

translate spacing scale examples

Example: translate-2 translates an element by 2 units on both axes based on the spacing scale. Example: -translate-6 translates an element by negative 6 units on both axes. Example: translate-8 translates an element by 8 units on both axes.

translate fraction examples

Example: translate-1/4 translates an element by 25% on both axes. Example: -translate-1/4 translates an element by negative 25% on both axes. Example: translate-1/6 translates an element by 16.67% on both axes. Example: translate-1/2 translates an element by 50% on both axes. Example: -translate-full translates an element by negative 100% on both axes.

translate-y axis examples

Example: -translate-y-4 translates an element negative 4 units on the y-axis only. Example: translate-y-2 translates an element 2 units on the y-axis only. Example: translate-y-1/2 translates an element 50% on the y-axis only.

translate-z axis examples

Example: -translate-z-8 translates an element negative 8 units on the z-axis. Example: translate-z-4 translates an element 4 units on the z-axis. Example: translate-z-12 translates an element 12 units on the z-axis. These require transform-3d to be applied to the parent element.

translate custom value syntax

Translate utilities support custom values using the syntax translate-[<value>], for example translate-[3.142rad] to specify a custom translation value.

translate responsive design support

Translate utilities support responsive design variants. For example, translate-45 can be used as a default class, and a different translate class like translate-60 can be applied at a responsive breakpoint.

Give your agent this brain