定位绝对定位的旋转文本

Question

我很难定位转换后的旋转文本。在垂直和水平方向上，我都不知道如何定位旋转后的文本 rotateText，使其在相对容器 #tslotBlock1inner 中为 bottom: 60px 和 left: 10%。

然后，如果您单击下面的 jsfiddle link 并将视口更改为 640px 或更小，您将看到旋转的文本完全消失，即使 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>

Answer 1

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

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

Answer 2

我同意 DavidW 的观点。我添加了一些定位和 bottom 属性，以使文本位于图像旁边。

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

Answer 3

我更愿意避免 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)

Answer 4

这是一种不同的方法，但不依赖于魔术 numbers/sizes，使用 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>

定位绝对定位的旋转文本

Positioning an absolute positioned rotated text

html

css

transform

rotation