CSS3で動かす（３） transformプロパティ rotate編
｜
目次
scale translateに続き 今度はrotateを使って色々な動きを作ってみます。
scale編 縮尺はこちら
translate編 移動はこちら
skew編 傾斜はこちら
CSS3の「transform」プロパティ rotate編
rotateは回転です。rotateを使う(X方向Y方向 同時指定)
rotate(回転角度)HTML
<div class="meronpan_roXY">
<img src="imges/meronpan.png" alt="">
</div>
CSS
.meronpan_roXY img {
-webkit-animation:anime-meronpanROXY 2s infinite linear;
animation:anime-meronpanROXY 2s infinite linear;
}
@keyframes anime-meronpanROXY {
from{
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
to{
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
結果はこれ
スポンサードリンク
rotateを使う(X方向指定)
rotateX(X軸を軸とする回転角度)HTML
<div class="meronpan_roX">
<img src="imges/meronpan.png" alt="">
</div>
CSS
.meronpan_roX img {
-webkit-animation:anime-meronpanROX 2s infinite linear;
animation:anime-meronpanROX 2s infinite linear;
}
@keyframes anime-meronpanROX {
from{
-ms-transform:rotateX(0deg);
-webkit-transform:rotateX(0deg);
transform:rotateX(0deg);
}
to{
-ms-transform:rotateX(360deg);
-webkit-transform:rotateX(360deg);
transform:rotateX(360deg);
}
}
結果はこれ
rotateを使う(Y方向指定)
rotateY(Y軸を軸とする回転角度)HTML
<div class="meronpan_roY">
<img src="imges/meronpan.png" alt="">
</div>
CSS
.meronpan_roY img {
-webkit-animation:anime-meronpanROY 2s infinite linear;
animation:anime-meronpanROY 2s infinite linear;
}
@keyframes anime-meronpanROY {
from{
-ms-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
to{
-ms-transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg);
}
}
結果はこれ
アマゾンで「パソコン用メガネ」を探す
スポンサードリンク
コメントを書き込む