在浮动 div 旁边旋转 div

Question

我有这样的布局：（也是JSFiddle here）

.rotate {
  transform: rotate(270deg) translate(-10em, 0);
  transform-origin: 0 0;
  float: left;
}

.left {
  float: left;
}

<div class='rotate'>
  Rotated
</div>
<div class='left'>
  Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br>
</div>

我试图让 .rotate div 紧挨着 .left div，但我做不到。

我试过了...

也将旋转后的 div 向左浮动（在代码片段中），但它占据了宽度，就好像它没有旋转一样。
添加 position:absolute 和 left:0，但与内容重叠

如何让 div 与左浮动的 div 一起旋转？

Answer 1

只需更改旋转 div 的 transform-orgin 并从该元素中删除 translate。

.rotate {
  transform: rotate(270deg);
  transform-origin: 100% 100%;
  float:left;
}

.left {
  float: left;
}

<div class='rotate'>
  Rotated
</div>
<div class='left'>
  Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br>
</div>

在浮动 div 旁边旋转 div

Rotate a div next to a floated div

html

css

css-transforms