- HOME
- > BLOG CATEGORY
- 【CSS】perspectiveの使い方、3Dに奥行きを指定する!

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
perspective
プロパティについて学びたい方へ今回は、perspectiveに関する記事になります。
perspectiveプロパティとは、要素を3D変形させた際に、奥行きを指定します。
[記事の内容]
perspective
プロパティとは、要素を3D変形させた際に、奥行きを指定します。
transformプロパティを指定している要素の親要素に、perspectiveを指定します。
書き方は以下のようになります。
/*perspective*/
親要素 {
perspective: 値;
}
子要素 {
transform: 関数(数値);
}
数値
とは、奥行きを数値で指定します。
親要素「perspective」には、「perspective: 300px」を指定しています。
子要素である、「赤色 box」には、「perspective(200px) rotateY(40deg)」の指定をしています。
perspective(200px)とは、奥行きの深さ200pxになります。
transform-originとは、中心点の位置になり、今回は「top left」になります。
子要素である、「黄色 box」には、「rotateX(60deg)」の指定をしています。
rotateX(60deg)とは、要素をX軸(60度)に3D回転します。
transform-originとは、中心点の位置になり、今回は「bottom left」になります。
このように、親要素に「perspective: 値」を指定することにより、
平面から、奥行きができます。
perspectiveについて
<!--赤色 box-->
<div class="perspective">
<div class="element perspective01">(200px) (40deg)</div>
</div>
<!--黄色 box-->
<div class="perspective">
<div class="element perspective02">rotateX(60deg)</div>
</div>
/*--共通 CSS--*/
.perspective {
perspective: 300px; /*--perspective--*/
width: 150px;
height: 150px;
display: inline-block;
background:rgba(204, 204, 204, 0.7);
margin: 80px 100px 50px;
}
.element {
width: 150px;
height: 150px;
position: relative;
color: #333;
text-align: center;
line-height: 150px;
}
/*--赤色 box--*/
.perspective01 {
transform: perspective(200px) rotateY(40deg);
transform-origin: top left;
background-color: #fd6158;
}
/*--黄色 box--*/
.perspective02 {
transform: rotateX(60deg);
transform-origin: bottom left;
background-color: #febe3e;
}
このように、3Dに変形した際に、奥行きの指定ができます。
今回は、親要素に「perspective」の指定をしたことにより、子要素にも適用されました。
子要素のみを3D変形する際には、「transform: perspective(数値)」を指定しましょう。
さらに詳しくはこちら記事から
【CSS】transform-originの使い方、中心点(位置)を指定する!
transform-originとは、要素を2D、3Dに変形させる時の中心点(位置)を指定
今回はこれで以上です。
perspective
プロパティとは、要素を3D変形させた際に、奥行きを指定します。perspective
プロパティを指定する際には、transformプロパティを指定している要素の親要素に指定しましょう。2023.06.22
2023.06.01
2022.06.10
2022.06.03
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog