マウスを乗せてください
transform: rotateプロパティは「要素の回転」を指定する場合に使用します。
html
<div class="square_transform_rotate"></div>
css
/* 四角形 回転 */
.square_transform_rotate:hover {
transform: rotate(45deg);
transition: transform 1s linear;
width: 100px;
height: 100px;
color: #fff;
cursor: pointer;
background-color: #39a9d6;
}
設定方法
指定方法
transform: rotate(角度)
transform: rotateX(角度)
transform: rotateY(角度)
transform: rotateZ(角度)
transform: rotate3d(値, 値, 値, 角度)
値
- rotate(角度)
- 2D回転
- rotateX(角度)
- X軸を軸とする回転
- rotateY(角度)
- Y軸を軸とする回転
- rotateZ(角度)
- Z軸を軸とする回転
- rotate3d(値, 値, 値, 角度)
- 最初の3つで[X, Y, Z]の方向ベクトル。最後で3D回転
rotateX(角度)
マウスを乗せてください
html
<div class="square_transform_rotateX"></div>
css
/* 四角形 回転X */
.square_transform_rotateX:hover {
transform: rotateX(180deg);
transition: transform 1s linear;
width: 100px;
height: 100px;
color: #fff;
cursor: pointer;
background-color: #39a9d6;
}
rotateY(角度)
マウスを乗せてください
html
<div class="square_transform_rotateY"></div>
css
.square_transform_rotateY:hover {
transform: rotateY(180deg);
transition: transform 1s linear;
width: 100px;
height: 100px;
color: #fff;
cursor: pointer;
background-color: #39a9d6;
}
rotateZ(角度)
マウスを乗せてください
html
<div class="square_transform_rotateZ"></div>
css
.square_transform_rotateZ:hover {
transform: rotateZ(180deg);
transition: transform 1s linear;
width: 100px;
height: 100px;
color: #fff;
cursor: pointer;
background-color: #39a9d6;
}
rotate3d(値, 値, 値, 角度)
マウスを乗せてください
html
<div class="square_transform_rotate3d"></div>
css
.square_transform_rotate3d:hover {
transform: rotate3d(180, 180, 180, 360deg);
transition: transform 1s linear;
width: 100px;
height: 100px;
color: #fff;
cursor: pointer;
background-color: #39a9d6;
}
