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

CSS3で動かす(2) transformプロパティ translate編

目次

おはこんばんちわハクロンです。

scaleに続き今度はCSS3の「transform」プロパティtranslateを使って色々な動きを作ってみます。
scale編 縮尺はこちら
rotate編 回転はこちら
skew編 傾斜はこちら

CSS3の「transform」プロパティ translate編

translateは移動です。画像は噂?のプリンごはんさんです。

translateを使う(X方向Y方向 同時指定)

translate(X方向の移動距離, Y方向の移動距離)

HTML

<div class="pringohan_tlXY">
    <img src="imges/pringohan.png" alt="">
</div>

CSS

.pringohan_tlXY img {
    -webkit-animation:anime-pringohanTLXY 2s infinite linear;
    animation:anime-pringohanTLXY 2s infinite linear;
}
@keyframes anime-pringohanTLXY {
     
    from{
        -ms-transform:translate(0,0);
        -webkit-transform:translate(0,0);
        transform:translate(0,0);
    }
    to{
        -ms-transform:translate(100px,30px);
        -webkit-transform:translate(100px,30px);
        transform:translate(100px,30px);
    }
}

結果はこれ


スポンサードリンク

translateを使う (X方向)

translateX(X方向の移動距離)

HTML

<div class="pringohan_tlX">
    <img src="imges/pringohan.png" alt="">
</div>

CSS

.pringohan_tlX img {
    -webkit-animation:anime-pringohanTLX 2s infinite linear;
    animation:anime-pringohanTLX 2s infinite linear;
}
@keyframes anime-pringohanTLX {
     
    from{
        -ms-transform:translateX(0);
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    to{
        -ms-transform:translateX(100px);
        -webkit-transform:translateX(100px);
        transform:translateX(100px);
    }
}

結果はこれ

translateを使う (Y方向)

translateY(Y方向の移動距離)

HTML

<div class="pringohan_tlY">
    <img src="imges/pringohan.png" alt="">
</div>

CSS

.pringohan_tlY img {
    -webkit-animation:anime-pringohanTLY 2s infinite linear;
    animation:anime-pringohanTLY 2s infinite linear;
}
@keyframes anime-pringohanTLY {
     
    from{
        -ms-transform:translateY(0);
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    to{
        -ms-transform:translateY(100px);
        -webkit-transform:translateY(100px);
        transform:translateY(100px);
    }
}

結果はこれ

     
目に優しいライトで作業するように心がけています。
「デスクライト」を
アマゾンで探す      
    
「PCメガネ」
 
スポンサードリンク


コメントを書き込む

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

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

CAPTCHA