css3の勉強～その12～transform

ransformを使って要素を変形させる方法

box2を動かしていく
[html]

<div id=”box1″></div>
<div id=”box2″></div>

#box1{
background:skyblue;
opacity:.5;
}

#box2{
background:orange;
opacity:.5;
transform:translate(20px,40px);x方向、y方向の移動
}

#box2{
background:orange;
opacity:.5;
transform:translateX(20px);x方向の移動
}

#box2{
background:orange;
opacity:.5;
transform:scale(0.5,1.5);x方向y方向の倍率を指定。scaleXやscaleYもある。
}

#box2{
background:orange;
opacity:.5;
transform:skew(10deg,30deg);x方向y方向の角度を指定。scewXやscewYもある。
}

#box2{
background:orange;
opacity:.5;
transform:rotate(30deg);角度を指定。
}

#box2{
background:orange;
opacity:.5;
transform:rotate(30deg);
transform-origin:0 0;起点を変える。デフォルトは50％,50%の中央が起点。
}