perspectiveプロパティで要素に遠近感を与える
CSSのperspectiveプロパティを利用することで要素に遠近感を与えることができます。使いどころは限られると思いますが、どこかのパーツとして利用してみたい機能ですね。
目次
- コード（perspective）
- 動作確認
- 参考リンク
コード（perspective）
CSS
.test-01-area{
width:200px;
height:100px;
border:1px solid #ddd;
perspective: 500px;
}
.test-01-content{
width:200px;
height:100px;
background-color:limegreen;
border:1px solid #aaa;
text-align:right;
animation: rotate-y 3s linear infinite;
}
.test-01-content img{
height:100%;
}
@keyframes rotate-y{
0%{transform:rotateY(0deg);}
100%{transform:rotateY(360deg);}
}
ポイントとしては、実際に遠近感を利用して表示する要素の親要素に対して「perspective」を設定します。
動作確認
◆perspective: 500px;
◆perspective: 300px;
◆perspective: 200px;