cman.jp > WEBページ作成TOP > CSSリファレンス > 「子要素の奥行きのx軸・y軸方向の位置」
WEBページ作成
広告
perspective-origin 「変形の起点」
「perspective-origin」は「perspective」で変形した要素の起点を指定することができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | なし |
広告
perspective-originの指定方法
| 構文 | |||||
|---|---|---|---|---|---|
|
perspective-origin : X Y; |
|||||
| プロパティ/設定値 | 意味 | ||||
| X | 横(水平)方向の起点位置 「長さ・大きさの単位」参照 |
||||
| Y | 縦(垂直)方向の起点位置 「長さ・大きさの単位」参照 |
||||
| デフォルト：「タグ毎のスタイル初期値」を参照 | |||||
perspective-origin のサンプル
<div style="
perspective : 50px">
<div style="
transform: rotateY(20deg);
background:rgb(176, 224, 230)">
</div>
<div style="
transform: rotateY(20deg);
background:rgb(255, 193, 139)">
</div>
</div>| 起点 | 起点の位置 |
|---|---|
| x 横(水平) |
|
| y 縦(垂直) |
|
| 関連するCSS(STYLE) | |
|---|---|
| animation | アニメーションの設定 |
| backface-visibility | 裏面の表示 |
| perspective | 子要素の奥行きの指定 |
| 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 | アニメーション速度 |
広告