カテゴリー

キーワード

 
> 【CSS3】perspectiveプロパテ...

【CSS3】perspectiveプロパティ、transform:perspective()を紹介します


2015 年 7 月 31 日 投稿    view: 5811
タグ:
このエントリーをはてなブックマークに追加

css perspectiveプロパティ

perspectiveプロパティ、transform:perspective()を紹介

こんにちは、WEBマーケティング部の杉尾です。


前回は、transformプロパティの値、matrix()とmatrix3d()を紹介しました。


【CSS3】transformプロパティの値、matrix()とmatrix3d()を紹介します


今回からはそれに引き続いて、perspectiveプロパティ、transform:perspective()を紹介します。



perspectiveプロパティ、transform:perspective()とは?

perspectiveプロパティは要素にtransformの効果を適用させる際、奥行きの深さを指定するものです。


transform:perspective(数値);も基本的には同じ指定をしますが、適用対象が違います。


perspectiveプロパティは、指定した要素の子要素で位置や変形を指定されたものに適用されます。


perspectiveプロパティ、transform:perspective()のブラウザ対応状況は?

CSS3 transform3D ブラウザ対応状況


perspectiveプロパティのブラウザ対応状況は、『3D transform』と同じです。


『Safari』、『iOS Safari』、『Android Browser』が対応しきっていないので、ベンダープレフィックスの『-webkit』をつけてください。


perspectiveプロパティ、transform:perspectiveの注意点

初期の草案では、perspectiveプロパティ、transform:perspectiveはともに単位をつけずに指定することになっていました。


こういう感じですね。

perspective:300;
transform:perspective(300);

しかし、現在の草案では単位をつけて指定するように修正されています。


ですので、


perspective:300px;
transform:perspective(300px);

という指定で統一するようにしてください。


perspectiveプロパティ、transform:perspective()のサンプル


perspectiveプロパティのサンプル


必要最低限のHTMLのみを記述しています。


HTML

<div class="test1">
    <p>perspective</p>
    <img src="okawa.jpg">
</div>

CSS

div.test1 {
    border:1px solid red;
    perspective:1200px;
}
div.test1 img {
    transform: rotateX(60deg);
}

CSSの3行目、perspectiveプロパティを使って奥行きを表現します。
perspectiveプロパティは変形させたい要素の親要素に指定します。
これは必ず正の値で記述してください。


5行目、奥行きをわかりやすくするためにX軸を基点とした回転を指定しています。


サンプル


perspective


transform:perspective()のサンプル


HTML

<div class="test2">
    <p>perspective</p>
    <img src="okawa.jpg">
</div>

CSS

div.test2 {
    border:1px solid red;
}
div.test2 img {
    transform:perspective(1200px) rotateX(60deg);
}

サンプル


transform:perspective()


まとめ

perspectiveプロパティ、transform:perspective()を紹介しました。


他のtransformの値と組み合わせると、より豊かな表現ができるようになります。


しっかり覚えて、新たな作成案件で使いたいですね。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事