1. TOP
  2. CSS
  3. CSS3で動かす(4) transformプロパティ skew編

CSS3で動かす(4) 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);
    }
}

結果はこれ

    休憩時間が楽しみになりますね!
アマゾンで「コーヒー」を探す
 
スポンサードリンク


コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA