[html][css] transform 변환 속성/transform-origin, style, perspective, perspective-origin, backface-visibility

transform-origin : 요소의 변환의 기준점을 설정

transform-style: 3D 변환 요소의 자식 요소도 3D변환을 사용할 지 설정

perspective: 하위 요소를 관찰하는 원근 거리를 설정

perspective-origin: 원근 거리의 기준점을 설정

backface-visibility: 3D변환으로 회전된 요소의 뒷면 숨김을 설정

---

transform-origin

<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{
  margin: 100px;
  transition: 1s;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

transform-origin: 기준점인데 원래 기본값은 50% 50% 0 이다 ( x 축 y축 z축)

그 기준점은 요소의 정 중앙이다.

그런데 0 0 0 으로 바꾸면 

왼쪽 상단 꼭짓점을 기준으로 rotate가 일어난다.

 

---

transform-style

3D변환 요소의 자식 요소도 3D 변환을 사용할 지 설정

flat: 사용하지 않음

preserve-3d : 사용함

<div class="perspective">
  <div class="grand-parent">
    <div class="parent">
      <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="">
    </div>
  </div>
</div>

.perspective{
  perspective: 500px;
  padding: 50px;
}
.grand-parent{
  transition: 1s;
  transform: rotateX(-45deg);
  transform-style: preserve-3d;
}
.parent{
  width: 200px;
  border: 3px solid tomato;
  transition: 1s;
  transform: rotateY(45deg);
    transform-style: preserve-3d;
}
img{
  margin-left:300px;
  transition:1s;
  transform: rotateX(45deg);
}

부모 요소가 3d속성을 사용하면 그 자식의 요소는 사용하지 않게 되는데

자식 요소도 사용하고 싶으면 부모 요소에 

  transform-style: preserve-3d;

이렇게 적어주어야한다.

---

perspective

하위 요소를 관찰하는 원근 거리를 설정

관찰하고자 하는 요소의 상위 요소에 perspective속성을 부여한다.

보통 관찰하고자 하는 요소가 여러개면 속성을 사용한다.

( perspective의 함수의 경우에는 관찰 대상에 직접 부여한다.)

 

---

perspective-origin

원근 거리의 기준점을 설정하여 내가 보는 시점을 다르게 하는 것

눈이 어디있냐

(다시보기)

---

backface-visibility

3D변환으로 회전된 요소의 뒷면을 숨김을 설정

visible: 뒷면 숨기지 않음

hidden: 뒷면 숨김

visible일때는 반전된 이미지

 <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{
  width: 300px;
  border: 1px solid red;
  transition: 1s;
  transform: perspective(400px)
    rotateY(180deg);
  backface-visibility: hidden;
}

backface-visibility를 hidden으로 할 경우 보이지 않음

---

matrix(a,b,c,d,e,f)

요소의 2차원 변환 효과를 지정

scale() skew() translate() rotate()를 지정

직접적으로는 사용하지 않음