html - 使用 CSS 旋转文本无法在右侧正确显示

Question

我必须在右侧旋转文本，但旋转文本显示不正确。现在它显示在中心，我需要在容器的右侧。另外，我必须从顶部显示全文.在完整 View 中查看代码段。

我需要这样的输出

 

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); 来做到这一点。你有这个权利

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

1. 元素宽度

这是最难的部分。相对单位总是指未旋转的元素。这意味着 rotate(90deg) 元素上的 width: 100% 会将其height 设置为 100% width 它的 parent 。

由于您希望它扩展视口(viewport)的整个高度(我假设)，您很幸运，因为您可以使用 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>