Question

我想在DIV中旋转文本元素，但是，在文本旋转之后，我的div会像空的一样折叠。是否有一个CSS技巧让我的DIV仍然围绕着我的内心元素？

这是我的代码：

＆＃13;

li {
  border: 1px solid black;
  list-style-type: none;
}

p {
  display: inline-block;
  transform-origin: right bottom;
  transform: rotate(270deg);
}

＆＃13;

<li>
  <div>
    <p>Some Text</p>
  </div>
</li>

<li>
  <div>
    <p>Some Text</p>
  </div>
</li>

＆＃13;

Answer 1

相反变换：rotate（xdeg）;您可以使用writing-mode来实现此目标。

正式语法

horizontal-tb | vertical-rl | vertical-lr | sideways-rl |侧身-LR

您的代码已重新访问：http://codepen.io/gc-nomade/pen/MpNBMa或以下

＆＃13;

li {
  border: 1px solid black;
  list-style-type: none;
}

p {
  display: inline-block;
  vertical-align: middle;
}

p.rotate {
  writing-mode: vertical-rl;
  /* for obsolete safari old win, add vendor prefix -webkit- */
  writing-mode: tb-rl;
  /* IEs */
  /* writing-mode:sideways-lr; could be the one */
  /* use scale() eventually untill sideways-lr is working everywhere */
  transform: scale(-1);
  padding: 1em;
  background: yellow;
  /* show me */
  max-height:10em; /* will force text to break on several lines if too long */
}

＆＃13;

<ul>
  <li>
    <div>
      <p class="rotate">Some Text</p>
      <p>aside <br/>any <br/>other <br/>text <br/>aside <br/>any <br/>other <br/>text </p>
    </div>
  </li>

  <li>
    <div>
      <p class="rotate">Some more Text<br/>over 2 lines</p>
      <p>aside any other text</p>
    </div>
  </li>
  <li>
    <div>
      <p class="rotate">Some more Text over 10em of height at the most</p>
      <p>aside any other text</p>
    </div>
  </li>
</ul>

＆＃13;

注意：MDN说：

这是一项实验技术由于此技术规范尚未稳定，请检查兼容性表以了解各种浏览器的用法。另请注意，随着规范的更改，实验技术的语法和行为可能会在未来版本的浏览器中发生变化。

请在此处查看：http://caniuse.com/#search=writing-mode

用DIV围绕变形元素

1 个答案: