CODEWITHSUNDEEP
htmlcss
Nboy
Nboy

Reputation: 56

Text is scaled, how do I undo this?

Because of the parent the text become also be scaled. How can I fix this? The formula 1/a (a=scale factor) doesn't work.

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

I also want the text inside the rhombus and not outside of it, but the transform makes that not possible.

Upvotes: 0

Views: 125

Answers (1)

Cedric Reichenbach
Cedric Reichenbach

Reputation: 9319

Your problem is the order of those operations. If you scale before rotating, the text will scale into a wrong direction (by 45 degrees), so just swap scaleY(1.7391304) and rotate(-45deg), leading to

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

Updated example

Upvotes: 4

Related Questions