CODEWITHSUNDEEP
htmlcss
user1469270
user1469270

Reputation:

Rotate element and place in corner of parent

I'm trying to position an element in the bottom right corner of it's parent. At the moment, you can see it's in the center, but touching the bottom:

http://jsfiddle.net/03r7gabp/

enter image description here

Ideally, I'd like it to be touching the bottom, flushed all the way to the right (what right: 0; typically does).

This is the desired effect:

enter image description here

Is this possible? I'm already using:

 transform-origin: bottom left;

Upvotes: 1

Views: 1280

Answers (3)

Hashem Qolami
Hashem Qolami

Reputation: 99464

There are couple of solutions to achieve that, however I found this one more flexible.

Due to the fact that you can combine multiple transform notations, you'll end up with:

.info {
    position: absolute;
    bottom: 0; right: 0;
    transform: rotate(-90deg) translateX(100%);
    transform-origin: 100% 100%;
}

The key point is that a percentage value on translate() notation is relative to the size of bounding box. I.e. the size of border-box of the absolutely positioned element in this case.

Here is a demo:

.container {
    width: 300px;
    height: 200px;
    border: 1px solid red;   
    position: relative;
}

.info {
    position: absolute;
    bottom: 0; right: 0;
    background-color: gold;

    -webkit-transform: rotate(-90deg) translateX(100%);
       -moz-transform: rotate(-90deg) translateX(100%);
         -o-transform: rotate(-90deg) translateX(100%);
        -ms-transform: rotate(-90deg) translateX(100%);
            transform: rotate(-90deg) translateX(100%);
    
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
}
<div class="container">
    <div class="info">
        hello this is a sentence
    </div>
</div>

Upvotes: 1

gvee
gvee

Reputation: 17161

Okay, so here's how I've done it!

http://jsfiddle.net/03r7gabp/2/

CSS

.info {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: lime;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    margin-left: 100%;
    width: 200px; /* height of container */
}

The only bodge that I'm not happy with is the width having to be a fixed value (equal to the height of the container).

Breakdown

Step 1

Step 1

Not much to see here, move along!

Step 2

Step 2

Note that we've specified the origin of rotation to be the bottom left. Imagine you stick a pin in that corner of the <div> and you then spin it about this point.

Step 3

Step 3

In the previous image our <div> was sat on the outside of the container. We can now adjust its margin to make it appear on the other side. Remember that the percentage specified is a measure of the width of the parent element

Step 4

Step 4

Now we "bump" the item to the bottom of the container.

Step 5

Step 5

Finally we have to give our div a width equal to the height of the parent container

An alternative solution would be to set the container to have overflow: hidden; and then put the width of the child element to arbitrarily large. Obviously if the length of sentence exceeded the height of the container, the words would be clipped (e.g. http://jsfiddle.net/03r7gabp/6/)

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

One solution is to change transform-origin: bottom left; to right and also change frombottom: 0 to top: 35px

.container {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.info {
  position: absolute;
  top: 35px;
  right: 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transform-origin: bottom right;
}
<div class="container">
  <div class="info">
    hello this is a sentence
  </div>
</div>

Upvotes: 0

Related Questions