转换起源在负旋转时确实很难

Question

我使用转换：旋转（-90deg）但结果很难移动到其选定的位置。我可以使用Javascript做到这一点，但无法使用transform-origin得到它。请注意，只有初始高度是已知的，而对象的字符长度可能会有所不同。这是一个js-fiddle版本： 代码：

transform-origin:cente -100% ?

https://jsfiddle.net/u6yzutw5/2/

Answer 1

您需要结合使用旋转和翻译

悬停翻译

.base {
  position:relative;height:200px;width:200px;background:yellow;margin:50px;
  }

.element {
  display: inline-block;
  position:absolute;top:0;left:0;
  background-color: red;
  }

.base:hover .element {
  transform: rotate(-90deg) translateX(-100%) translateY(-100%);
  transform-origin: top left;
  }

<div class="base">
  <div class="element">my text</div>
  </div>