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-origin

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

transform-origin utility classes

Tailwind CSS provides the following transform-origin utility classes: 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), and origin-top-left (transform-origin: top left).

transform-origin custom property syntax

The origin-(<custom-property>) syntax generates transform-origin: var(<custom-property>), allowing you to reference CSS custom properties. The origin-[<value>] syntax generates transform-origin: <value>, allowing arbitrary values to be used.

transform-origin with rotate example

Example code showing transform-origin utilities used with rotation transforms: <img class="origin-center rotate-45 ..." src="/img/mountains.jpg" /> rotates around the center, <img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" /> rotates from top-left, and <img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" /> rotates from bottom.

transform-origin responsive design support

Transform-origin utilities support responsive design variants. The default class origin-center can be overridden for specific breakpoints using classes like sm:origin-top to change the transform origin at different screen sizes.

Give your agent this brain