WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

CSSで長体/平体を表現

f:id:mmmmofu:20160926210108p:plain

transform: scale()で文字の縦横方向の大きさを伸ばしたり
小さくしたりすることで長体や平体を再現。

長体

.text {
  -webkit-transform: scale(1, 2.1);
  -ms-transform: scale(0.6, 1);
  -o-transform: scale(1, 2.1);
  transform: scale(1, 2.1);

}
.text {
  -webkit-transform: scale(0.6, 1);
  -ms-transform: scale(0.6, 1);
  -o-transform: scale(0.6, 1);
  transform: scale(0.6, 1);
}

平体

.text {
  -webkittransform: scale(1, 0.7);
  -ms-transform: scale(1, 0.7);
  -o-transform: scale(1, 0.7);
  transform: scale(1, 0.7);
}
.text {
  -webkittransform: scale(1.7, 1);
  -ms-transform: scale(1.7, 1);
  -o-transform: scale(1.7, 1);
  transform: scale(1.7, 1);
}