定位绝对定位的旋转文本答案

【问题标题】：Positioning an absolute positioned rotated text定位绝对定位的旋转文本
【发布时间】：2018-06-05 19:08:18
【问题描述】：

我很难定位转换后的旋转文本。无论是垂直还是水平，我都无法弄清楚如何定位旋转的文本rotateText，以便它在相关容器#tslotBlock1inner 内是bottom: 60px 和left: 10%。

然后，如果您单击下面的 jsfiddle 链接并将视口更改为 640 像素或更小，您将看到旋转后的文本完全消失，即使使用 left:30%。

我在下面添加了一张图片，说明我希望它如何定位。谁能帮忙解释一下我做错了什么？

.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>

【问题讨论】：

标签： html css rotation transform

【解决方案1】：

对于属于页面内容一部分的元素，我更愿意避免使用position: absolute;，因此我改用float。我还设置了transform-origin，因为通常更容易确定相对于固定点而不是对象边界框中间的定位：

.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)

【讨论】：

这是完美的。谢谢！
我怎样才能用这种方法将rotateText 垂直居中？

【解决方案2】：

我通过更新你的变换和删除定位得到它

.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;
}

【讨论】：

【解决方案3】：

我同意 DavidW 的观点。我添加了一些定位和底部属性以将文本保持在图像旁边。

.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;
}

【讨论】：

【解决方案4】：

这是一种不同的方法，但不依赖于幻数/大小，使用 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>

【讨论】：