Skip to content
Yumma CSS Logo Yumma CSS Logo Yumma CSS
Blog
Yumma CSS 3.5 is live! 🎉

Transform Origin

Controls to specify where an element should start transforming.

Class Style

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

Set the transformation point by positioning it at the bottom 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-b t-r-30" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-b t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-b t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Bottom Left

Set the transformation point by 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="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-bl t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-bl t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Bottom Right

Set the transformation point by 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="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-br t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-br t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Center

Set the transformation point by 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="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-c t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-c t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Left

Set the transformation point by positioning it at the 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-l t-r-30" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-l t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-l t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Set the transformation point by positioning it at the 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-r t-r-30" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-r t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-r t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Top

Set the transformation point by positioning it at the top 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-t t-r-30" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-t t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-t t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Top Left

Set the transformation point by 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="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tl t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tl t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Top Right

Set the transformation point by 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="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tr t-r-45" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>


  <div class="my-8 p-r">
    <img class="d-18 d-ib rad-1 t-o-tr t-r-55" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Conditional styles

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

Breakpoint variant

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

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

Hover variant

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>