html - 文本已缩放，如何撤消？

Question

由于父级文本也被缩放。我怎样才能解决这个问题？公式 1/a(a=比例因子)不起作用。

http://codepen.io/anon/pen/yYxpaj

<div class ="rhombus"><p>text</p></div>

p {
  color: white;
  transform: scaleY(1.7391304) rotate(-45deg) ; 
  font-size: 30px;
}


.rhombus {
  width: 27vw;
  height: 27vw;
  margin: -2vw 6.5vw;
  background: #000;
  transform: scaleY(.575) rotate(45deg) ;
}

我还想要菱形内的文本而不是菱形外的文本，但转换使这成为不可能。

Answer 1

您的问题是这些操作的顺序。如果在旋转之前缩放，文本将缩放到错误的方向(45 度)，所以只需交换 scaleY(1.7391304) 和 rotate(-45deg)，导致

p {
  color: white;
  transform: rotate(-45deg) scaleY(1.7391304); 
  font-size: 30px;
}

Updated example