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

2017年3月11日

cssで縦書きって……

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

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

ので

 -moz-transform: matrix(0, 1, 1, 0, 0, 0);
 -webkit-transform: matrix(0, 1, 1, 0, 0, 0);
 -o-transform: matrix(0, 1, 1, 0, 0, 0);
 -ms-transform: matrix(0, 1, 1, 0, 0, 0);
 transform: matrix(0, 1, 1, 0, 0, 0);

これでどうだろう。

これを

こうじゃ※小さくなっているのはほかの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()の要素。

と思えばよさそう。

transform: matrix(0, 1, 1, 0, 0, 0);

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

 

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