Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS v3.0 is finally live 🎉

Transform Origin

Controls to specify where an element should start transforming.

Utility Properties

t-o-b

 transform-origin: bottom;

t-o-bl

 transform-origin: bottom left;

t-o-br

 transform-origin: bottom right;

t-o-c

 transform-origin: center;

t-o-l

 transform-origin: left;

t-o-r

 transform-origin: right;

t-o-t

 transform-origin: top;

t-o-tl

 transform-origin: top left;

t-o-tr

 transform-origin: top right;

Bottom

This example sets the transform origin to bottom. The t-o-b utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the bottom edge of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-b t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-b t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-b t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Bottom Left

This example sets the transform origin to bottom-left. The t-o-bl utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the bottom-left corner of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-bl t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-bl t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-bl t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Bottom Right

This example sets the transform origin to bottom-right. The t-o-br utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the bottom-right corner of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-br t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-br t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-br t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Center

This example sets the transform origin to center. The t-o-c utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the center of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-c t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-c t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-c t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Left

This example sets the transform origin to left. The t-o-l utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the left edge of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-l t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-l t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-l t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

This example sets the transform origin to right. The t-o-r utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the right edge of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-r t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-r t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-r t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Top

This example sets the transform origin to top. The t-o-t utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the top edge of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-t t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-t t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-t t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Top Left

This example sets the transform origin to top left. The t-o-tl utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the top-left corner of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tl t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tl t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tl t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Top Right

This example sets the transform origin to top right. The t-o-tr utility defines the point around which transformations (such as rotations or scaling) are applied, positioning it at the top-right corner of the element.

 
<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tr t-r-30" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tr t-r-45" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tr t-r-55" src="https://picsum.photos/600?image=360" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="https://picsum.photos/600?image=360" />
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:t-o-*,md:t-o-*, lg:t-o-*, and xxl:t-o-* allows targeting specific utilities in different viewports. 

<div class="t-o-l md:t-o-r ..."></div>
Hover modifiers

Alternatively, you can apply :hover by using h:t-o-* utility to override elements and change their values when hovering over them. 

<div class="t-o-l h:t-o-r ..."></div>