I have utilized the solution provided in a previous question I asked: Rotated text producing inconsistent results, but I am looking to display the text in a different way. Specifically, I want the first letter of the word to be at the top with the rotated text anchored to the bottom right, as shown in the screenshot below. Currently, my code starts the word at the bottom, and the solution should be compatible with a fluid/responsive layout.
Here is the JSFiddle link for reference: https://jsfiddle.net/wy0qq027/
Desired Outcome:
https://i.sstatic.net/up0sf.jpg
CSS:
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;
}