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

Question

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

我需要这样的输出

＆＃13;

＆＃13;

 

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

1. 轮换本身

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

1. transform: translate(x, y);

这将解决您发布的问题（但请继续阅读）。这告诉浏览器将其旋转到何处。默认值是对象的中间位置。在您的情况下，您要么将此作为右上角，要么将div移动到另一个位置。请注意，您经常需要使用.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>

width: 100%

1. 元素宽度

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

由于您希望它展开视口的整个高度（我假设），您很幸运，因为您可以使用.right { position: fixed; right: 0; width: 100vh; background-color: yellow; } .rotated { transform: rotate(90deg) translate(100%, 0); transform-origin: 100% 0 0; } - 单位轻松解决此问题，但请注意，旧版本不支持此功能浏览器！如果您需要支持那些，那么您可能必须使用js。

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

{{1}}

Answer 2

为什么不做这样的事情？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;