画像を回転させるアニメーションの方法 HTML,CSS復習21

この記事でわかること

 

画像を回転させる方法がわかる

みなさん、こんにちは。
今回は画像を回転させる方法です。
料理などの写真が回転していたらびっくりさせれますよね笑
今回はそれをしていきます。

まずアニメーションの基本は以下の記事も参考にして下さい。

ブログで文字をジャンプ,揺らして注目させる方法 HTML,CSS復習20 - ★うつ病の一人暮らし★外で働かないで生きていく

画像を回転させるには

画像を回転させるにはrotateを使いますが

まずはアニメーションの基本のスタイルシートです。

img.rotate{
animation-name:kaiten1;　　　　　/*アニメーションの名前の設定*/
animation-duration:1s;                     /*1回転にかかる時間の設定*/
animation-timing-function: ease;     /*動きのパターンの設定  easeは速さに強弱をつける*/
animation-iteration-count: infinite;  /*動きの回数設定　infiniteは無限回*/
}

ここに回転のアニメーションをつけていきます。

はじめの位置を0%、終わりとの位置を100%として360度回転していきます。

０度は0、360度は360degを使います。

・縦方向に回転する場合はtranslateXを使います。

はじめの位置

0%{transform:rotateX(0);)

終わりの位置

100%(transform:rotateY(360deg);}

追加スタイルシートは次のようになります。

@keyframes kaiten1{
0%{transform:rotateX(0);}
100%{transform:rotateX(360deg);}
}

・横方向に回転する場合はtranslateYを使います。

縦方向のXをYに変えるだけです。

はじめの位置

0%{transform:rotateY(0);)

終わりの位置

100%(transform:rotateY(360deg);}

追加のスタイルシートは次のようになります。

@keyframes kaiten1{
0%{transform:rotateY(0);}
100%{transform:rotateY(360deg);}
}

まとめたスタイルシート

img.rotate{
animation-name:kaiten1;　　　　　/*アニメーションの名前の設定*/
animation-duration:1s;                     /*1回転にかかる時間の設定*/
animation-timing-function: ease;     /*動きのパターンの設定  easeは速さに強弱をつける*/
animation-iteration-count: infinite;  /*動きの回数設定　infiniteは無限回*/
}
keyframes@ kaiten1{
0%{transform:rotateX(0);}
100%{transform:rotateY(360deg);}
}

記事中には次のように記述します。

<img src="画像のulr" class="rotate">

するとこうなります。

縦回転の場合

横回転の場合

またポイ活をしているのでよかったら ここをクリックしてECナビにも登録してください。みなさんも私もお金がもらえます。特にアマゾンギフトに変えることができるのですごくいいです。もし登録してくれたら私もみなさんの使っているポイントサイトなどがあれば登録して貢献などしていきたいです。