Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Unused CSS Stages Transitions and Transforms 2D Transforms

Posted by Sérgio Leal
Sérgio Leal
7,803 Points

2D Transforms Quiz Question

On the Which of the following will position the transform-origin at the bottom-right corner of an element? why isn't transform-origin: right bottom; considered a valid option?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    .box {
      width: 90%;
      height: 90%;
      margin: 0 auto;
      background-color: #f0f0f0;
    }

    .inner-box {
      background-color: lightblue;
      width: 100px;
      height: 100px;
      transform-origin: right bottom;
      transition: transform 1s;
    }

    .box:hover .inner-box {
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="inner-box"></div>
  </div>
</body>
</html>

changing transform-origin: right bottom; to transform-origin: 100% 100% gives me the same result on the browser.

1 Answer

Marko Koron
Marko Koron
20,658 Points
Marko Koron
Marko Koron
20,658 Points

Because the order should be: bottom right for this answer to be correct.

Sérgio Leal
Sérgio Leal
7,803 Points

According to the W3 Specification the value of the transform-origin is defined as:

[ left | center | right | top | bottom | <percentage> | <length> ]
| 
  [ left | center | right | <percentage> | <length> ]
  [ top | center | bottom | <percentage> | <length> ] <length>?
|
  [ center | [ left | right ] ] && [ center | [ top | bottom ] ] <length>?

Applying the second rule, right bottom is a valid option.

Marko Koron
Marko Koron
20,658 Points
Marko Koron
Marko Koron
20,658 Points

Yeah I know, I just tried in code in Codepen the two combinations "right bottom" and "bottom right" and it seems that both work so now I m also puzzled. I finished this lesson yesterday so I remember that the order int the video is top/bottom left/right.

Sérgio Leal
Sérgio Leal
7,803 Points

I've finished it today and was curious why that option wasn't valid, tested the two options (the right bottom and 100% 100%) on my browser and both worked.

So I googled and found the W3 specification page and the Mozzila Developer page and in both the transform-origin: right bottom seems to be a valid option.

Marko Koron
Marko Koron
20,658 Points
Marko Koron
Marko Koron
20,658 Points

Lol! I also did the same 'cause you got me thinking. I known that in the video uses the statement transform-origin: top right, but it seems that the order of keywords doesn't affect the result. Plus in the video is stated the first value should be the x-axis so it should be the left or right keyword following this logic.