Rotated text producing inconsistent results - css

Question

I'm trying to display rotated text whereby its always absolute positioned to the bottom of its parent. The parent is 100% height of the browser window and I'd like the text to appear 50px from the bottom for all browser/screen sizes.
Here's my code:
html,body,.carousel,.carousel a.item { height: 100%; }
.carousel a.item {
height: 100%;
padding-top: 100px;
position: relative;
overflow: hidden;
width: 25%;
float: left;
}
.rotate {
zoom: 1;
white-space: nowrap;
position: absolute;
bottom: 0;
right: 0;
z-index: 3;
display: block;
width: 100%;
background: pink;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-o-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.carousel a.item h1 {
color: #fff;
position: absolute;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
background: blue;
z-index: 5;
display: block;
}
.bg-image {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div class="carousel">
<a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
<div class="rotate">
<h1>Some really long title thats quite long. Did I say it was long?</h1>
</div>
</a>
<a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
<div class="rotate">
<h1>This is really short</h1>
</div>
</a>
<a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
<div class="rotate">
<h1>Short but also longer but not to long</h1>
</div>
</a>
<a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
<div class="rotate">
<h1>Some really long title thats quite long. Did I say it was long?</h1>
</div>
</a>
</div>
I have a fiddle setup of my code so far: https://jsfiddle.net/77xzfsfa/ and here's an image of what I'm trying to achieve:

Answer 1

You don't need to absolutely position the content of the rotated element.
Just adjust the transforms and transform origin.
.rotate{
zoom: 1;
white-space: nowrap;
position: absolute;
z-index: 3;
display: inline-block;
position: absolute;
right: 0;
bottom: 50px;
transform:translate(100%,0%) rotate(-90deg);
transform-origin:bottom left;
}
.carousel a.item h1 {
color: #fff;
z-index: 5;
}
* {
margin: 0;
}
html,
body,
.carousel,
.carousel a.item {
height: 100%;
}
.carousel a.item {
height: 100%;
padding-top: 100px;
position: relative;
overflow: hidden;
width: 25%;
float: left;
}
.rotate {
zoom: 1;
white-space: nowrap;
position: absolute;
z-index: 3;
display: inline-block;
position: absolute;
right: 0;
bottom: 50px;
transform: translate(100%, 0%) rotate(-90deg);
transform-origin: bottom left;
}
.carousel a.item h1 {
color: #fff;
z-index: 5;
}
.bg-image {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<div class="carousel">
<a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
<div class="rotate">
<h1>Some really long title thats quite long. Did I say it was long?</h1>
</div>
</a>
<a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
<div class="rotate">
<h1>This is really short</h1>
</div>
</a>
<a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
<div class="rotate">
<h1>Short but also longer but not to long</h1>
</div>
</a>
<a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
<div class="rotate">
<h1>Some really long title thats quite long. Did I say it was long?</h1>
</div>
</a>
</div>

Answer 2

You need to tweak the transform-origin and the positioning of the .rotate element like this :
html,body,.carousel,.carousel a.item { height: 100%; }
.carousel a.item {
height: 100%;
padding-top: 100px;
position: relative;
overflow: hidden;
width: 25%;
float: left;
}
.rotate {
white-space: nowrap;
position: absolute;
bottom: 50px;
left: 100%;
transform-origin: left bottom;
transform: rotate(-90deg);
}
.carousel a.item h1 {
color: #fff;
}
.bg-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
<div class="carousel">
<a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
<div class="rotate"><h1>Some really long title thats quite long. Did I say it was long?</h1></div>
</a>
<a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
<div class="rotate"><h1>This is really short</h1></div>
</a>
<a href="#" class="item bg-image" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97800&w=300&h=800');">
<div class="rotate"><h1>Short but also longer but not to long</h1></div>
</a>
<a href="#" class="item bg-image" style="background-image: url('http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg');">
<div class="rotate"><h1>Some really long title thats quite long. Did I say it was long?</h1></div>
</a>
</div>
Note that I removed all the vendor prefixes in the snippet for answer brievity and removed unecessary CSS.

Answer 3

when you do put rotate: -90px
the real bottom is the left
the real right is the bottom
then we can say:
bottom -> right
right -> top
top -> left
left -> bottom
but when you put here
left: 0px;
it does not really 0px;
because on calculate from the center of div in horizontal position
for you code it will be correctly
like this
.carousel a.item h1 {
color: #fff;
font-size: 15px;
font-weight: 400;
position: absolute; bottom:10px; left: 150px;
height: 100%;
width: 100%;
background: blue;
z-index: 5;
display: block;
}

Answer 4

Try this, simply put the <br> in the code:
<div class="rotate">
<h1>Short but also longer but not to long</h1>
<br>
</div>