cssで文字を縦向きにしたい

2017年3月11日

cssで縦書きって……

CSSでどうしても縦書きにしたかった。

無理やり1文字ずつ下に落ちるようなwidth/paddingにすればよかったんだけど……
長音記号のような、回転しないとダメなものってある。

ので

これでどうだろう。

これを

こうじゃ※小さくなっているのはほかのcssもつけてたから。

transform: matrix()

それにしても「matrix()」はなんですの?

matrix(a,b,c,d,e,f)
a(1番目の値)⇒ X軸(水平方向)の縮尺
b(2番目の値)⇒ Y軸(垂直方向)の傾斜率
c(3番目の値)⇒ X軸(水平方向)の傾斜率
d(4番目の値)⇒ Y軸(垂直方向)の縮尺
e(5番目の値)⇒ X軸(水平方向)の移動距離
f(6番目の値)⇒ Y軸(垂直方向)の移動距離

http://scene-live.com/page.php?page=81

aとdはtransform:scale()の要素。
bとcはtransform:skew()の要素。
eとfはtransform:translate()の要素。

と思えばよさそう。

これは、傾斜率に変化をつけて、回転させているということ……。

 

なんでrotateで回転させないんだろうか……