CSS Animation : 3D Transform

참조 : http://www.beautifulcss.com/archives/2270

 

메소드설명

translate3d(x,y,z)	객체의 위치를 가로(x), 세로(y), 깊이(z) 방향으로 정의하여 이동시킵니다. 단위로는 px, %, em 따위를 사용할 수 있습니다. 예를들어, translate(60px, 60px, 60px)은 객체를 우측으로 60px, 하단으로 60px, 그리고 사용자와 60px만큼 가까운 위치로 이동시킵니다. 또한, 양수와 음수를 사용할 수 있습니다. 더 자세한 내용은 추후 기술합니다.
translateX(n)	객체의 위치를 가로 방향으로만 이동시킵니다. translateX(100px)은 우측으로 100px만큼 이동합니다. -100px과 같이 음수로 기재하면 반대방향인 좌측으로 100px만큼 이동합니다.
translateY(n)	객체의 위치를 세로 방향으로만 이동시킵니다. -100px과 같이 음수로 기재하면 반대방향인 상단으로 100px만큼 이동합니다.
scale3d(x,y,z)	객체의 세 방향을 한번에 늘이거나 줄일 수 입니다.
scaleX(n)	객체를 x축 중심으로 늘이거나 줄입니다.
scaleY(n)	객체를 y축 중심으로 늘이거나 줄입니다.
scaleZ(n)	객체를 z축 중심으로 늘이거나 줄입니다. CSS에는 두께라는 개념이 없습니다.
rotate3d(x,y,z)	객체의 세 방향을 한번에 회전 시킵니다.
rotateX(n)	X축을 중심으로 객체를 회전시킵니다. 아래 종합예제에서 보여줍니다.
rotateY(n)	Y축을 중심으로 객체를 회전시킵니다. 아래 종합예제에서 보여줍니다.
rotateZ(n)	2D Transform의 Rotate와 동일합니다.
perspective(n)	객체를 바라보는 원근을 입니다. 화면을 바라보는 사용자로부터 얼마나 멀리에 위치하는가를 나타냅니다.px을 사용하며, 수치가 낮을수록 가깝기 때문에 왜곡도 심하게 일어납니다. 자세한 내용은 추후 다시 설명합니다.
matrix3d(nx16)	2D Transform에서 알아봤듯이, 모든 값을 한번에 지정할 수 있지만, 16개의 값이 존재하며, 여기서 다룰 수 없는 영역입니다.

 

# translateZ 의 이해.

기본 좌표계의 카메라를 기준으로, 사용자와 가까워지느냐(=사물이 커진다) 멀어지느냐로 이해하면 편하다.

다만 카메라를 바꾸면 달라질 수 있다.

 

 

[ 중요 ] Perspective (심도, 원근)

- 3D 에서 가장 중요한 요소 : transform, perspective

- translateZ 는 perspective 값 범위 이내에서 조절되도록 하자.

.myClass:hover {
  transform: perspective(150px) translateZ(60px);
}

Individual perspective values	hover 같이 단일 형태로만 적용
Parent element perspective value	하위 객체다수를 포함하는 부모객체에 적용시 일괄 적용

# Pespective 값 차이에 따른 심도 변화

참조 : https://3dtransforms.desandro.com/perspective

# Perspective-orgin

부모 객체 하나에만 선언한다.

.camera {
    perspective: 70px;
    perspective-orgin: 50% 50%
}

 

# transform-style : flat

flat - (default) 자식객체한테 3D 명령들이 동작하지 않음.

       Ex> 아래 코드 마지막 rotateX(-30deg); 가 동작하지 않는다.

.parent {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border: 1px solid #ddd;
    transform: rotateX(45deg);
    transform-style: flat
}

.child {
    margin-top: 40px;
    padding: 100px 0;
    width: 100%;
    background-color: #ddd;
    text-align: center;
    color: #999;
    transform: rotateX(-30deg);
}

<div class="container">
    <div class="parent">
        <div class="child">
            I'm your sun.
        </div>
    </div>
</div>

# transform-style : preserve-3d : 3D

 

.parent {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border: 1px solid #ddd;
    transform: rotateX(45deg);
	transform-style: preserve-3d;
}

.child {
    margin-top: 40px;
    padding: 100px 0;
    width: 100%;
    background-color: #ddd;
    text-align: center;
    color: #999;
    transform: rotateX(-30deg);
}

<div class="container">
    <div class="parent">
        <div class="child">
            I'm your sun.
        </div>
    </div>
</div>

 

# backface-visibility: hidden

- 중요

- backface-visibility: visible 시에는, rotateX(180deg) 시 "앞면을 뒤에서 보는 것"처럼 된다. (뒷면이란 건 없다)

- backface-visibility: hidden 시에는, rotateX(180deg) 시 객체가 없는 것처럼 투명하게 된다.