CSS3で動かす（４） transformプロパティ skew編
｜
目次
scale translate rotateに続き 今度はskewを使って色々な動きを作ってみます。
scale編 縮尺はこちら
translate編 移動はこちら
rotate編 回転はこちら
CSS3の「transform」プロパティ rotate編
rotateは傾斜です。skewを使う(X方向Y方向 同時指定)
skew(X軸の傾斜角度, Y軸の傾斜角度)HTML
<div class="omu_skXY">
<img src="imges/omu.png" alt="">
</div>
CSS
.omu_skXY img {
-webkit-animation:anime-omuSKXY 2s infinite linear;
animation:anime-omuSKXY 2s infinite linear;
}
@keyframes anime-omuSKXY {
from{
-ms-transform:skew(0deg,0deg);
-webkit-transform:skew(0deg,0deg);
transform:skew(0deg,0deg);
}
to{
-ms-transform:skew(45deg,45deg);
-webkit-transform:skew(45deg,45deg);
transform:skew(45deg,45deg);
}
}
結果はこれ
スポンサードリンク
skewを使う(X方向指定)
skew(X軸の傾斜角度)HTML
<div class="omu_skX">
<img src="imges/omu.png" alt="">
</div>
CSS
.omu_skX img {
-webkit-animation:anime-omuSKX 2s infinite linear;
animation:anime-omuSKX 2s infinite linear;
}
@keyframes anime-omuSKX {
from{
-ms-transform:skewX(0deg);
-webkit-transform:skewX(0deg);
transform:skewX(0deg);
}
to{
-ms-transform:skewX(45deg);
-webkit-transform:skewX(45deg);
transform:skewX(45deg);
}
}
結果はこれ
skewを使う(Y方向指定)
skew(Y軸の傾斜角度)HTML
<div class="omu_skY">
<img src="imges/omu.png" alt="">
</div>
CSS
.omu_skY img {
-webkit-animation:anime-omuSKY 2s infinite linear;
animation:anime-omuSKY 2s infinite linear;
}
@keyframes anime-omuSKY {
from{
-ms-transform:skewY(0deg);
-webkit-transform:skewY(0deg);
transform:skewY(0deg);
}
to{
-ms-transform:skewY(45deg);
-webkit-transform:skewY(45deg);
transform:skewY(45deg);
}
}
結果はこれ
アマゾンで「コーヒー」を探す
スポンサードリンク
コメントを書き込む