分1234567今回はCSS3でもあまり一般的に知られてないtransformプロパティについて説明します。Draftとして受けいられ,現在は策定中です(※1⁠)⁠。HTML5の対応,レンダリングエンジンのスピードに焦点があてられます。CSS3に慣れ実践的に使えるように,今から新しいセレクタも含めプロパティを勉強し実践で使えるようしておくべきでしょう。今回説明するプロパティは『transformプロパティ』と『transform-originプロパティ』です。両方のプロパティに共通するtransform(トランスフォーム)という名前のとおり,『⁠変形』を実装するためのプロパティです。※1transformプロパティは,SVGのTransformの属性を元に実装されています。Chromeと,W3Cの草案に正式に採用されてから僅かしか経っていませんがFirefoxの3.1がサポートしています。Exprolerが執筆時点ではサポートしていません。Firefoxの場合-moz-とプリフィックス(接頭辞)を記述する必要があります。Transformの基本Transformプロパティは,拡大(scale⁠)⁠,回転(rotate⁠)⁠,ゆがみ(skew⁠)⁠,移動(translate)と,4つのファンクションがあります。2D(flat)と3Dの指定Transformプロパティを学ぶ際は,3D(3次元)で考えることが大切です。これはCSS全般に言えることで,CSSは2Dではなく3Dを扱うからです。3Dで考えるクセを身につけるようにしましょう。3DとはX軸,Y軸,Z軸のそれぞれ3方向への軸になります。上述したように,現在,transformプロパティを記述する場合には,webkit系では-webkit-を,firefoxでは-moz-を接頭辞としてプロパティの前に記述します。Webkit系、今後将来採用された際の記述をするといいと思います。hoge;Transformプロパティの記述順序transformプロパティは記述の順番に適用されます。scale(拡大・縮小)の後にtranslate(移動)を適用させると移動する値にも差がでてしまうことに注意してください。次ページからは,実際に各プロパティのサンプルを確認していきましょう。1234567著者プロフィール菊池崇(きくちたかし)ActLink株式会社にてプロデューサー,allWebクリエイター塾ではXHTML+CSS,microformatsの講師。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。