WEB/html,CSS

[html][css] transform 3D / perspective함수/원근법

자바칩 프라푸치노 2021. 4. 18. 10:31
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTAyMTBfMjgw%2FMDAxNjEyOTQxMDIxNDEw.N9aT-wqtTyq5tXDs9MPqdVC7rggnfny5I5-yhJH2a1Ag.yF0nsRESAU2h5Y0HvtFCAw3F61FzCATAVqcolYdaq1wg.JPEG.jeonghee46%2FIMG_4345.jpg&type=sc960_832" alt="">
img{
  transform: perspective(500px)
    rotateX(45deg);
}

perspective 뷰는 얼만큼 멀리서 떨어져서 보겠다는 것이기에 값이 커질수록 멀리서 보는 효과가 있다(원근법)

그리고 transform 의 속성에 첫번째에 적어야한다.

 

img{
  transform: perspective(500px)
    rotateY(45deg);
}
728x90