cman.jp > WEBページ作成TOP > CSSリファレンス > 「子要素の奥行きの指定」
WEBページ作成
広告
perspective 「奥行きの指定」
「perspective」は「transform:perspective(値)」と同じ奥行きの表現を指定します。「transform:perspective(値)」との違いは、子要素に指定の奥行きが適用されることです。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | しない |
広告
perspectiveの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
perspective : 値; |
|||||
| プロパティ/設定値 | 意味 | ||||
| perspective : 値; | 奥行きの指定 「長さ・大きさの単位」参照 |
||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
perspective のサンプル
<style type="text/css">
.parentDiv{
border : 1px solid #ccc;
padding : 40px 0;
width : 300px;
}
.childDiv{
margin : 0 auto;
width : 60px;
height : 60px;
transform : rotateY(20deg);
}
<!-- html -->
<div class="parentDiv" style="perspective : 50px;">
<div class="childDiv" style="background:rgb(176, 224, 230)"></div>
<div class="childDiv" style="background:rgb(255, 193, 139)"></div>
</div>
<div class="parentDiv">
<div class="childDiv" style="background:rgb(176, 224, 230)"></div>
<div class="childDiv" style="background:rgb(255, 193, 139)"></div>
</div>
| 関連するCSS(STYLE) | |
|---|---|
| animation | アニメーションの設定 |
| backface-visibility | 裏面の表示 |
| perspective-origin | 子要素の奥行きのx軸・y軸方向の位置 |
| transition | トランジションの設定 |
| transition-delay | トランジションのディレイ |
| transition-duration | トランジションの再生時間 |
| transition-property | トランジション対象のCSSプロパティ |
| transition-timing-function | トランジションの速度 |
| transform | 要素の変形 |
| transform-origin | 要素変形の起点 |
| transform-style | 要素重なり時の３D表示 |
| animation-delay | アニメーションのディレイ |
| animation-direction | アニメーションの方向 |
| animation-duration | アニメーションの再生時間 |
| animation-fill-mode | アニメーションの再生前後のスタイル |
| animation-iteration-count | アニメーションの繰り返し |
| animation-name | アニメーションのキーフレーム名 |
| animation-play-state | アニメーションの再生と一時停止 |
| animation-timing-function | アニメーション速度 |
広告