1. TOP
  2. CSS
  3. CSS3で動かす(3) transformプロパティ rotate編

CSS3で動かす(3) 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);
    }
}

結果はこれ

     
アマゾンで「パソコン用メガネ」を探す
 
スポンサードリンク


コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA