뇌 채우기 공간

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

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
저작자표시 비영리 변경금지 (새창열림)

'WEB > html,CSS' 카테고리의 다른 글

[html][css] animation효과 주기/ @keyframes , animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state  (0) 2021.04.18
[html][css] transform 변환 속성/transform-origin, style, perspective, perspective-origin, backface-visibility  (0) 2021.04.18
[html][css] transform 2D속성 / 이동, 크기 변환, 회전, 기울기  (0) 2021.04.18
[html][css] 애니메이션 transition속성 / transition-property, transition-duration,transition-timing-function  (0) 2021.04.18
[html][css] position특징 - display 수정: inline요소가 block요소로 변함  (0) 2021.04.17
'WEB/html,CSS' Related Articles more