> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/transform-transition-animation/3d-transforms.md).

# 3D 트랜스폼

## 3D 트랜스폼 (Transforms)

{% hint style="warning" %}
3D 트랜스폼 속성은 [IE10 이상 지원](https://caniuse.com/?search=3d%20transform)한다. 
{% endhint %}

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

* transform-origin : 회전을 시킬 축을 결정
  * 기본값 (50% 50%)
  * (0% 0%)일 때 이미지 위의 왼쪽 끝이 회전축이 된다.
* [backface-visibility](https://developer.mozilla.org/ko/docs/Web/CSS/backface-visibility) : 사용자에게 요소의 뒷 면을 보일지 결정한다. 
  * visible(기본값), hidden<br>
* rotateX()
* rotateY()
* rotateZ() = rotate()
* rotate3d(x, y, z)<br>
* translateX()
* translateY()
* translateZ() = translate()
* translate3d(x, y, z)<br>
* scaleX()
* scaleY()
* scaleZ() = scale()
* scale3d(x, y, z)<br>
* skewX()
* skewY()
* skew()
  * skew는 skewZ()인 Z축이 없으며 사실 3D가 아니다.<br>
* perspective()&#x20;
  * 투시도법 (원근법에 따라 눈에 보이는 그대로 그리는 기법)
  * 값이 커질 수록 왜곡이 작아진다.
  * 예를 들어, 건축도면 등에서 투시도법을 많이 사용

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

* [perspective](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective\(\))
  * 값이 커질 수록 왜곡이 적어진다.&#x20;
* perspective-origin (원근법의 기준점을 설정)
* **transform-style: preserve-3d** (요소의 자식이 3D 공간에 배치)
  * 반드시 설정을 해야 3D transform 속성이 적용된다.&#x20;

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

## 예시&#x20;

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

```css
.album-player {
  backface-visibility: visible;
  backface-visibility: hidden;
}
```

```markup
<ul class="album-list">
  <li class="album-card">
    <img class="album-cover" />
    <iframe class="album-player" src="//goo.gl/syBGn1"></iframe>
  </li>
</ul>
```

```css
  /*  ---앨범 카드---  */
.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공간에 있다는 것을 알려주어야 한다. */
}
```

## 참고&#x20;

* [3D 트랜스폼 사용하기](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#3D_%EA%B4%80%EB%A0%A8_CSS_%EC%86%8D%EC%84%B1)
* [트랜스폼 문법](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms)
* [Transforms - Learn to Code Advanced](https://learn.shayhowe.com/advanced-html-css/css-transforms/)
* [Intro to CSS 3D transforms](http://desandro.github.io/3dtransforms/)
* [CSS 3D 트랜스폼 (실습 시작) by codepen](https://codepen.io/hanna244/pen/jOMJpWV?editors=0100)
* [CSS 3D 트랜스폼 (실습 완료) by codepen](https://codepen.io/hanna244/pen/VwKREdd)