使用CSS旋转右侧未正确显示的文本

Question

我必须旋转右侧的文本，但是旋转文本没有正确显示。现在它显示在我需要的右侧的容器中心。另外，我必须从顶部显示全文。在完整视图中查看片段。

我需要像这样的输出

 

h2{
margin: 0;
    padding: 0;
    }
    .parent_div {
     margin-top: 100px;
    	}
    .v_fluid_title{
    	position: relative;
    	right: 0;

    }

    .v_fluid_title h2{
    	position: absolute;
    	right: 0;
    	font-size: 55px;
    	text-transform: uppercase;
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg); /* Safari 3-8 */
        transform: rotate(90deg);
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parent_div">
	<div class="v_fluid_title">
	  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
    </div>
<div class="container">
	<div class="text_content">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
</div>
</div>

Answer 1

CSS中的旋转相当繁琐。要记住三件事：

1. 轮换本身

这一点都不难。你可以像使用transform: rotate(90deg);那样做。你有这个权利

2. transform-origin

这将解决您发布的问题（但请继续阅读）。这告诉浏览器将其旋转到何处。默认值是对象的中间位置。在您的情况下，您要么将此作为右上角，要么将div移动到另一个位置。请注意，您经常需要使用transform: translate(x, y);。

例：

.right {
  position: fixed;
  right: 0;
  width: 50px;
}

.rotated {
  transform: rotate(90deg) translate(100%, 0);
  transform-origin: 100% 0 0;
}

<div class="right rotated">
  Hello world!
</div>

3. 元素宽度

这是最难的部分。相对单位总是指未旋转的元素。这意味着width: 100%元素上的rotate(90deg)将其高度设置为其父级的100％宽度。

由于你希望它扩展视口的整个高度（我假设），你很幸运，因为你可以使用vh-unit轻松解决这个问题，但请注意，旧版浏览器不支持此功能！如果您需要支持那些，那么您可能必须使用js。

.right {
  position: fixed;
  right: 0;
  width: 100vh;
  background-color: yellow;
}

.rotated {
  transform: rotate(90deg) translate(100%, 0);
  transform-origin: 100% 0 0;
}

<div class="right rotated">
  Hello world!
</div>

Answer 2

你为什么不做这样的事情？

.content,
.rotated-title {
  display: inline-block
}

.content {
  width: 70%
}

.rotated-title {
  width: 29%;
  text-align: center;
  font-size: 45px;
  text-transform: uppercase;
  -ms-transform: translateY(-100%) rotate(90deg);
  /* IE 9 */
  -webkit-transform: translateY(-100%) rotate(90deg);
  /* Safari 3-8 */
  transform: translateY(-100%) rotate(90deg);
}

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing 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. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  </div>
  <div class="rotated-title">
    I AM TITLE2
  </div>
</div>