CSS3で動かす（４） transformプロパティ skew編
｜
目次
scale translate rotateに続き 今度はskewを使って色々な動きを作ってみます。
scale編 縮尺はこちら
translate編 移動はこちら
rotate編 回転はこちら
CSS3の「transform」プロパティ rotate編
rotateは傾斜です。skewを使う(X方向Y方向 同時指定)
skew(X軸の傾斜角度, Y軸の傾斜角度)HTML
1 2 3 | <div class="omu_skXY"> <img src="imges/omu.png" alt=""></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .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
1 2 3 | <div class="omu_skX"> <img src="imges/omu.png" alt=""></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .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
1 2 3 | <div class="omu_skY"> <img src="imges/omu.png" alt=""></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .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); }} |
結果はこれ
アマゾンで「コーヒー」を探す
スポンサードリンク
コメントを書き込む