CODEWITHSUNDEEP
htmlcssrotationtransform
Paul
Paul

Reputation: 3368

Positioning an absolute positioned rotated text

I am having a really tough time positioning a transformed, rotated text. Both vertically and horizontally, I cannot figure out how to position the rotated text rotateText, so that it is bottom: 60px and left: 10% within the relative container #tslotBlock1inner.

Then if you click on the jsfiddle link below and alter the viewport for 640px or less, you will see that the rotated text completely goes away, even with left:30%.

I have included an image below of how I would like it positioned. Can anyone help and explain what I am doing wrong?

Jsfiddle link to see mobile version

enter image description here

.sec90 {
	width: 90%;
	margin: 20px auto 60px auto;
}
.rotateText {
	position: absolute;
	top: 50%;
	bottom: 60px;
	left: 2%;
	-webkit-transform: rotate(-90deg) translateX(-50%);transform: rotate(-90deg) translateX(-50%);
	font-family: 'Nunito', sans-serif;
	letter-spacing: .2rem;
	font-size: 2rem;
	color: #b82222;
	text-transform: uppercase;
}
#tslotSec {
	margin: 60px auto;
}
#tslotBlock1 {
	display: inline-block;
	vertical-align: top;
}
#tslotBlock1 {
	width: 70%;
}
#tslotBlock1:after {
	content: '';
	display: inline-block;
	background: #b82222;
	width: 8px;
	height: 70%;
	vertical-align: middle;
}
#tslotBlock1inner {
	padding-right: 10%;
	position: relative;
}
#tslotBlock1inner img {
	width: 35%;
	height: auto;
	margin-left: 30%;
}
.dG {
	font-size: 1.1rem;
	line-height: 1.5em;
	font-family: 'Nunito', sans-serif;
}

/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {
.rotateText {
	bottom: 0px;
	left: 30%;
	-webkit-transform: rotate(-90deg) translateX(0%);transform: rotate(-90deg) translateX(0%);
	font-size: 1.5rem;
}

}
<section class="sec90" id="tslotSec">
			<div id="tslotBlock1">
				<div id="tslotBlock1inner">
					<h2 class="blockTG">Advantages</h2>
					<p class="dG">
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
					<p class="dG">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
					<div class="rotateText">Advantages</div>
					<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782">
				</div>
			</div>
		</section>

Upvotes: 0

Views: 134

Answers (4)

lipp
lipp

Reputation: 5926

This is kind of a different approach, but does not depend on magic numbers/sizes, using css writing-mode:

.rotated-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 60px;
  text-transform: uppercase;
  display: inline-block;
  background: cyan;
}

.flex {
  display: flex;
}

.image {
  flex-grow: 1;
  background: url(https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
<p> LAKJSDLKJASLDJKALSDJLASKDLAKSJDLKJASLDKASLDJLASKDJLASKJDLASDJ </p>
<div class="flex">
  <div class="rotated-text">Advantages</div>
  <div class="image" />
</div>

Upvotes: 0

James
James

Reputation: 11

I agree with DavidW. I added some positioning and a bottom attribute to keep the text down beside the image.

.rotateText {
    float: left;
    position: relative;
    bottom: 0px;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 2rem;
    color: #b82222;
    text-transform: uppercase;
}

Upvotes: 0

DavidW
DavidW

Reputation: 1421

I prefer to avoid position: absolute; for elements that are part of a page's content, so I used float instead. I also set transform-origin since it's often easier to figure out positioning relative to a fixed point rather than the middle of an object's bounding box:

.rotateText {
    float: left;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 2rem;
    color: #b82222;
    text-transform: uppercase;
}

(Modified fiddle)

Upvotes: 1

Rob
Rob

Reputation: 118

I got it by updating your transforms and removing the positioning

.rotateText {
position: absolute;
-webkit-transform: rotate(-90deg) translate(-100px, -100px);
transform: rotate(-90deg) translate(-100px, -100px);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}

Upvotes: 0

Related Questions