Drawer|web制作に関するネタの引き出しサイトweb制作に関するネタの引き出しサイトTwitterFacebookRSS登録TOPページに戻るCSS要素を変化させる、CSS3「transform」のおさらい要素を変化させる、CSS3「transform」のおさらい2013年01月15日CSS今回は、指定した要素を変化させる「transform」を詳しく見ていきたいと思います。変化の状態を見ながら確認しようと思います。今回も説明のベンダープレフィックスは省略していますが、動作はFirefoxとChromeの最新で確認しています。このプロパティは3Dの指定もありますが、今回は平面の2D指定のみだけにします。rorate要素の回転を指定します。rotateY(360deg);}}translate要素を移動させます。translate();(X,Y軸の移動)translateXとtranslateYを同時に指定しています。translateY(50px);}}scale要素の拡大・縮小をします。scale();・・・XとYを同時に指定する。scaleY(1.5);}}skew要素を傾斜変形させる。skew();・・・XとYを同時に指定する。skewY(15deg);}}transform-origin(基準点変更)変形の基準点を変更できます。初期値は要素の真ん中になっています。centerのようなキーワードやpxでも指定できます。scale(1);}}というわけでtransformの基本的な使い方でした。Drawerこのサイトについてホームページ制作のマークアップエンジニアをしています。このブログはWebに関する記事を扱っています。自分で作ったものや試したもの調べたものを紹介しています。webdrawer.netページTOPへ戻る。