TOP

記事内で横にくるりんこ...と回る画像

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

 

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

 

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

 

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

 

 

取り付けの際、ご注意がございます

 

今回の関連解説は、当ページを含めて6ページございますが、一ページにすべてを
収めようとしたのですが、CSSが混見合って動かなくなるので別々に
記述コードを分配しました

 

上記理由により、一つのページで2個ぐらいはおけると思いますが、
動かなくなりましたら数を減らしてください

 

ページ別に複数配置する場合、スタイルシートにCSSを置くのですが、
複数取り付けますと、いずれかが動かなくなりますので追加ごとに作動を
確認してください

 

エントリーページでしたら、上級者設定、スタイルの割り込みにCSSを置きますと
多くのページに取り付けても反発せず動きます

 

当ページは、スタイルの割り込みにCSSおいて動かしています

 

 

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

 

 

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

 

以下のように動きます

 

 

 

横回転

 

 

 

 

 

 

 

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

 

 

CSS

 

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

 

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

 

 


 

ブランコ

 

 

 

 

 

 

 

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

 

CSS

 

#imgb 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="imgc" class="sampleImg mb"><img src="<% pageDepth %>img/710094.jpg" style="width:320px;" alt="" /></div>

 

CSS

 

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

 

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

 

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

 

 

 


 

 

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


 

 

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

 

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

関連ページ

ズームインする画像
ズームインする画像とは?画像が大きくなったり、小さくなったりするんです
斜め横に傾斜で動く画像
斜め横にスルーと傾斜で動く画像ヲおいてみました
風車みたいに回る画像
画像が風車のように回ります
横移動、縦移動の連動画像
水平横に行ったり来たり、上下に上げ下げのスライド移動する画像
ひし形表示で変形する画像
斜めひし形の画像が動きに合わせて変形します
記事中の画像、フォントがスクロールするとフェードインで現れる
記事をスクロールすると、画像、またはフォントが、スーと、動的作動?で、せり上がりの出現イメージアクションを導入する解説です