3D 트랜스폼

3D 트랜스폼 (Transforms)

3D 트랜스폼 속성은 IE10 이상 지원한다.

트랜스폼을 적용할 요소에 적용 하는 속성

  • transform-origin : 회전을 시킬 축을 결정

    • 기본값 (50% 50%)

    • (0% 0%)일 때 이미지 위의 왼쪽 끝이 회전축이 된다.

  • backface-visibility : 사용자에게 요소의 뒷 면을 보일지 결정한다.

    • visible(기본값), hidden

  • rotateX()

  • rotateY()

  • rotateZ() = rotate()

  • rotate3d(x, y, z)

  • translateX()

  • translateY()

  • translateZ() = translate()

  • translate3d(x, y, z)

  • scaleX()

  • scaleY()

  • scaleZ() = scale()

  • scale3d(x, y, z)

  • skewX()

  • skewY()

  • skew()

    • skew는 skewZ()인 Z축이 없으며 사실 3D가 아니다.

  • perspective()

    • 투시도법 (원근법에 따라 눈에 보이는 그대로 그리는 기법)

    • 값이 커질 수록 왜곡이 작아진다.

    • 예를 들어, 건축도면 등에서 투시도법을 많이 사용

자식 요소를 3D 처리할 부모 요소에 설정

  • perspective

    • 값이 커질 수록 왜곡이 적어진다.

  • perspective-origin (원근법의 기준점을 설정)

  • transform-style: preserve-3d (요소의 자식이 3D 공간에 배치)

    • 반드시 설정을 해야 3D transform 속성이 적용된다. 

/* perspective */
.album-cover {
  transform: perspective(300px) rotateY(40deg);
}

예시

<backface-visibility> : 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정한다.

.album-player {
  backface-visibility: visible;
  backface-visibility: hidden;
}
<ul class="album-list">
  <li class="album-card">
    <img class="album-cover" />
    <iframe class="album-player" src="//goo.gl/syBGn1"></iframe>
  </li>
</ul>
  /*  ---앨범 카드---  */
.album-card {
  cursor: pointer;
  float: left;
  width: 340px;
  height: 340px;
  margin: 30px;
  transition: box-shadow 0.3s ease-in-out;
}

.album-card:hover {
  box-shadow: 0 0 0 1px #ff6a03, 0 0 40px 5px hsla(25, 100%, 51%, 0.3);
}

.album-card * {
  position: relative;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  transition: all 0.8s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;
  transform-style: preserve-3d;
}

.album-card:hover .album-cover {
    transform: perspective(1000px) rotate(180deg) scale(0.5);
}

.album-card:hover .album-player {
  transform: perspective(1000px) rotate(360deg) scale(0.5);
 /* perspective(1000px) 값은 부모요소에 일괄적용 하면 상속된다. */


/* ---앨범 커버--- */
.album-cover {
  transform: perspective(400px) rotate(45deg);
}


/* ---앨범 플레이어---  */
.album-player {
  border: none;
  transform: rotate(180deg);
  backface-visibility: hidden;
  /* 해당 요소를 적용시키기 위해서는 부모요소에게
  transform-style: preserve-3d;를 적용시켜
  자식들이 3D공간에 있다는 것을 알려주어야 한다. */
}

참고

Previous2D 트랜스폼Next트랜지션

Last updated