CSS3 transform

ちょっと調べたことを備忘用に書き残します。

CSS3でtransformというプロパティがあります。対象を移動・回転・拡大・縮小等できます。

HTMLクイックリファレンス
CSS3リファレンス
transform
⇒http://www.htmq.com/css3/transform.shtml

このブログテンプレートのCSSに下記を付け足しました。※後日やめました

a img:hover {transform:scale(1.1)}

こうすると、画像リンクにマウスオーバーすると画像が1.1倍に拡大されます。

サンプル画像※変化ありません
Windows 10 を入手する_14o-00

FC2ブログの機能にある、サムネイル画像を利用して記事を書く場合、簡単で面白い効果になると思います。

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

No title
面白いですね~。
CSS3で色々できるようになったのはいいけど、ブラウザごとに対応してるかどうか調べてからじゃないと使えないのが面倒です。
まあ、旧いブラウザは切り捨ててもいいんですけど、なぜかうちのブログ、ie9の人が意外と多いみたいで…。
はやくvistaのサポート終わらないかなぁ!
宵乃 さんへ
ブラウザ対応を気にしだしたらキリがないので、切捨てはしかたないですね。

CSS3でいろんな機能が追加されましたが、活用しているサイトって少ない気がします。たいていはJSで実装してます。

Vistaのサポート終わったと思ってました。期間延長したんですね、それならWin10無料アップデートに対応してくれればいいのに…

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。