CSS

CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる」でjQueryを使ったりCSSのtransitionを使ったりしてたんですが、これをtransformを使えばもっと簡単に作ることができます。最初からそれ使えよって話ですが・・・。以下サンプルやら使い方です。

[ads_center]

transformを使ってみる

ということでtransformにはscaleやrotateなど色々あるんですが、単純に要素を拡大/縮小したい場合はscaleを使います。以下scaleを使ったサンプルです。前回と同様にマウスオーバーすると要素が拡大します。

サンプル

HTML

<div class="sample">
    <a href="#">sample</a>
</div>

CSS

.sample {
    width: 100px;
    height: 100px;
    margin: 30px;
}
.sample a {
    background: #06F;
    color: #fff;
    font-size: 13px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.sample a:hover {
    background: #0FF;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

記述も簡単になりましたね。ちなみにtransformは複数の関数を同時に指定できます。以下は上記のscaleと同時にrotateも追加してみたサンプルです。プロパティも多少変更していますが。

サンプル

CSS

.sample {
    width: 100px;
    height: 100px;
    margin: 30px;
}
.sample a {
    background: #06F;
    color: #fff;
    font-size: 13px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    display: block;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.sample a:hover {
    background: #0FF;
    color: #ccc;
    font-size: 20px;
    font-weight: bold;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    -webkit-transform: scale(1.3) rotate(15deg);
    -moz-transform: scale(1.3) rotate(15deg);
    -o-transform: scale(1.3) rotate(15deg);
    transform: scale(1.3) rotate(15deg);
}

rotateは回転する角度を指定することができます。scaleと組み合わせると面白いですね。ちょっとしたアクセントになりそうな感じです。ということで他にも色々と組み合わせると表現の幅が広がりますね。ただ、IEも考慮するとなるとやっぱりjQueryを使った方いいのかなと思ったりもしました。

関連記事

  1. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  2. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  3. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  4. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  5. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  6. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP