回転

transform: rotate(deg);

rotate(r)...回転 * プラス : 時計回り * マイナス : 反時計回り

rotateX(r)...横軸で回転

rotateY(r)...縦軸で回転

rotateZ(r)...直交で回転

rotate3d(x,y,z,r)...3次元で回転

移動

transform: translate(px);

translate(x,y)...水平垂直に移動 * プラス : 右,下 * マイナス : 左,上

translateX...横(x軸)に移動 * プラス : 右 * マイナス : 左

translateY...縦(y軸)に移動 * プラス : 下 * マイナス : 上

translateZ...直交に移動

translate3d(x,y,z)...3次元に移動

transform: scale(数値);

１が原寸

scale(x,y)...水平垂直に拡大縮小

scaleX...横(x軸)に拡大縮小 * 大きく : 横長になる * 小さく : 縦長になる

scaleY...垂直(y軸)に拡大縮小 * 大きく : 縦長になる * 小さく : 横長になる

scaleZ...直交に拡大縮小

scale3d(x,y,z)...3次元に拡大縮小

transform: skew(deg);

skew(r,r)...水平垂直に傾斜 * プラス : 左,上 * マイナス : 右,下

skewX(r)...水平(x軸)に傾斜 * プラス : 左 * マイナス : 右

skewY(r)...垂直(y軸)に傾斜 * プラス : 上 * マイナス : 下

まずJavaScriptでHTMLのidを取得

var 変数名 = document.getElementById('id名');

変数名.style.transform = 'どう変形させたいか';

例）

example.style.transform = 'rotateX(60deg)';

これは

#example {
  transform: rotate(60deg);
}

と同じ内容になる

半角スペースを入れる

transform: rotateX(60deg) rotateY(10deg) scale(0.5);

example.style.transform = 'rotateX(60deg) rotateY(10deg) scale(0.5)';