トップページ ＞ サイト内の画像をアニメーションで動かす手法まとめ ＞ 横から縦回転まで色々動く画像の置き方

記事内に置いた画像が、なぜか固定されないで動く？

 

どこかでそんなサイト見たことないですか？

 

はてさてどんな仕組みで動いているのか...ですね

 

でも、面倒なんで考えるのやめて当ページのＣＳＳ解説従いコードを取り付けてください

 

 

 

 

以下に置いてるスタイル以外を確認する場合、巻末の関連メニューよりお進みください

 

 

画像だけは自己努力で？なんでもいいんで用意してくだされば

 

以下のように動きます

 

 

 

横回転

 

 

 

 

 

 

 

記事内に置くコード
<div id="imgａ" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>

 

 

ＣＳＳ

 

#imgａ img {
animation: animation01 2s infinite ease 1s both;
.}

 

@keyframes animation01 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

 

 

---

 

ブランコ

 

 

 

 

 

 

 

記事内に置くコード
<div id="imgｂ" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>

 

ＣＳＳ

 

#imgｂ img {
animation: animation02 2s infinite ease 1s both;
}

 

@keyframes animation02 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}

 

#img02 img {
animation: animation02 2s infinite ease 1s both;
-webkit-animation: animation02 2s infinite ease 1s both;
}
@keyframes animation02 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
@-webkit-keyframes animation02 {
from {
-webkit-transform: rotateX(0deg);
}
to {
-webkit-transform: rotateX(360deg);
}
}

 

 

---

 

 

センター回転

 

 

 

 

 

<div id="imgｃ" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>

 

ＣＳＳ

 

#imgｃ img {
animation: animation03 2s infinite ease 1s both;
}

 

@keyframes animation03 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}

 

#imgｃ img {
animation: animation03 2s infinite ease 1s both;
-webkit-animation: animation03 2s infinite ease 1s both;
}

 

 

 

---

 

 

今回は、webdrawer.net様のサイトを参考にさせていただきました
ありがとうございます
http://webdrawer.net/css/transform.html

---

 

 

ここまで
これ以上、ページに置くと動かなくなりました

 

次に進みます　以下メニューで確認

関連ページ

ズームインする画像

ズームインする画像とは？画像が大きくなったり、小さくなったりするんです

斜め横に傾斜で動く画像

斜め横にスルーと傾斜で動く画像ヲおいてみました

風車みたいに回る画像

画像が風車のように回ります

横移動、縦移動の連動画像

水平横に行ったり来たり、上下に上げ下げのスライド移動する画像

ひし形表示で変形する画像

斜めひし形の画像が動きに合わせて変形します

記事中の画像、フォントがスクロールするとフェードインで現れる

記事をスクロールすると、画像、またはフォントが、スーと、動的作動？で、せり上がりの出現イメージアクションを導入する解説です

一覧