読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【CSS】transformプロパティ

HTML・CSS

cssのtransformについて改めてまとめました。

translate

tlanslate(x軸の移動,y軸の移動);

transform:translate(100px,100px);

tlanslateX(x軸の移動);

transform:translate(100px);

tlanslateY(y軸の移動);

transform:translateY(100px);

tlanslateZ(z軸の移動);

transform:translateZ(100px);

rotate

rotate(回転する角度);

transform:rotate(100deg);

rotateX(x軸に回転する角度);

transform:rotateX(100deg);

rotateY(y軸に回転する角度);

transform:rotateY(100deg);

rotateZ(z軸に回転する角度);

transform:rotateZ(100deg);

rotate3d(数値, 数値, 数値, 回転角度)

transform:rotate3d(1,0,0,180deg);

skew

skewX(x軸の傾斜角度)

transform:skewX(100deg);

skewY(y軸の傾斜角度)

transform:skewY(100deg);

skew(x軸,y軸)

transform:skew(100deg,100deg);