右に回転する
右に回転
div#box1 {
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotate(45deg);
}
左に回転する
マイナス角度を設定すると左側に回転する
左に回転
div#box2 {
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotate(-45deg);
}
X軸に回転する
縦向きに回転する。天地を逆さまにするイメージかな~
縦に回転
div#box3 {
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotateX(180deg);
}
Y軸に回転する
横向きに回転する。回転扉みたいだね~
横に回転
div#box4 {
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotateY(180deg);
}
Z軸に回転する
右向きに回転する。XYZの指定が無い時と同じ動作なのかな。
横に回転
div#box5 {
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotateZ(45deg);
}
要素を回転させる場合は、上下左右の余白も考慮してあげないと、重なってしまう。
また、webkit系ブラウザー以外に対応させる場合は、以下の様に個別に記述が必要です。
sample{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
親要素との関係
子要素を回転表示させると親要素からはみ出して表示する。
div#oya{
margin:0;padding:0;width:100%;
background-color:#666;}
div#box6 {
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotate(45deg);
}
親要素との関係2
親要素からはみ出した部分を非表示にする。
div#oya2{
margin:0;padding:0;width:100%;
background-color:#666;overflow:hidden;}
div#box7{
margin:0px;padding:0;
width:50px;height:50px;
background-color:#ccc;
-webkit-transform:rotate(45deg);
}