TOP

変形する画像

 

ひし形の形状で、左右がずれ移動しますが、その際変形します

 

 

右前 左後ろ移動

 

 

 

 

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

 

 

 

CSS

 

#img10 img {
animation: animation10 2s infinite ease 1s both;
}

 

@keyframes animation10 {
from {
transform: skew(0,0);
}
to {
transform: skew(10deg,15deg);
}
}

 

#img10 img {
animation: animation10 2s infinite ease 1s both;
-webkit-animation: animation10 2s infinite ease 1s both;
}
@keyframes animation10 {
from {
transform: skew(0,0);
}
to {
transform: skew(10deg,15deg);
}
}
@-webkit-keyframes animation10 {
from {
-webkit-transform: skew(0,0);
}

to {
-webkit-transform: skew(10deg,15deg);
}
}

 

 

 

 

 

横にひし形へ変形

 

 

 

 

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

 

 

CSS

 

#img11 img {
animation: animation11 2s infinite ease 1s both;
}

 

@keyframes animation11 {
from {
transform: skewX(0,0);
}
to {
transform: skewX(15deg);
}
}

 

#img11 img {
animation: animation11 2s infinite ease 1s both;
-webkit-animation: animation11 2s infinite ease 1s both;
}
@keyframes animation11 {
from {
transform: skewX(0,0);
}
to {
transform: skewX(15deg);
}
}
@-webkit-keyframes animation11 {
from {
-webkit-transform: skewX(0,0);
}

to {
-webkit-transform: skewX(15deg);
}
}

 

 


 

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


関連ページ

横から縦回転まで色々動く画像の置き方
サイトを訪れた読者様が、なんでだろうと首をかしげる、そんな仕組み?横回転から前進回転とか各種の動きがCSS指定ですぐ作れます
ズームインする画像
ズームインする画像とは?画像が大きくなったり、小さくなったりするんです
斜め横に傾斜で動く画像
斜め横にスルーと傾斜で動く画像ヲおいてみました
風車みたいに回る画像
画像が風車のように回ります
横移動、縦移動の連動画像
水平横に行ったり来たり、上下に上げ下げのスライド移動する画像
記事中の画像、フォントがスクロールするとフェードインで現れる
記事をスクロールすると、画像、またはフォントが、スーと、動的作動?で、せり上がりの出現イメージアクションを導入する解説です