[4주차] 3. CSS의 변환 속성

CSS 변환 효과(Transform)

Transform 2D 변환 함수

• 애니메이션에 특화되어 있는 이런 함수들을 애니메이션 만들 때 쓰는 것이 좋다
• transform: 함수(값) 함수(값);
• 함수는 띄어쓰기 통해 다중 입력 가능

1. 전체를 아우르는 함수 matrix

• matrix(n,n,n,n,n,n): 2차원 변환 효과
• translate, scale, rotate, skew 등의 함수가 matrix를 대신한다.
• 이동, 크기, 회전, 기울임을 한번에 제어해주는 함수
• 이 함수 사용시 일반적인 상식에서 벗어난 방식으로 해서 사용이 어렵다.
• 직접적으로 사용할 필요는 없다. 브라우저가 알아서 해주기 때문

[실질적 쓰는 함수]

1. 이동 함수 translate

• 이동 관련 제어해주는 함수[ position과 다른 점]
• 이동시키고 배치하는 개념일 경우 position 속성을 추천
• 상황에 따라 요소가 실시간으로 변해야 하는 개념이라면 position을 추천하지 않고(position은 이동하고 배치한 게 끝인 개념) 실시간을 변화 가능한 translate 추천
• position은 transition 효과 줄 때 바뀌기 전 요소에 position 값을 초기화를 해줘야만 요소가 바뀔 때 자연스럽게 바뀜 하지만 매번 이렇게 설정하는 데 불편하기도 하고 position은 애니메이션하는데 특화가 되어 있는게 아니라 최적화되있지 안하게 애니메이션이 될 수 있다. 이런 요소들을 이용해 애니메이션을 많이 작성하게 되면 웹사이트가 버벅일 수 있다.
• translate 같은 경우 애니메이션을 만드는데 특화되어 있어 많이 만들어도 웹사이트가 자연스럽게 작동한다.
• 단위로 이동 제어
• translate(x,y): 이동(X축, Y축)
  -x축, y축 제어
• translateX(x) : 이동(X축)
  -x축 제어
• translateY(y): 이동(Y축)
  -y축 제어

2. 크기 함수 scale

• 확대 / 축소에 대한 함수
• 단위가 없고 배수로 지정
• 비율에 맞게 확대나 축소할 때 쓰임
• scale(x, y) : 크기(X축, Y축)
• scaleX(x): 크기(X축)
• scaleY(y): 크기(Y축)

3. 회전 함수 rotate

• 요소를 회전시키는 함수
• 인수는 특정한 각도 추가
• 단위는 deg(degree)이다 ex)45도=45degree
• rotate(degree): 회전(각도)

4. 비틀기 기울임 함수 skew

• 단위는 deg
• 요소를 비트는 함수
• skew(x-deg, y-deg) : 기울임(X축, Y축)
• skewX(x-deg): 기울임(X축)
• skewY(y-deg):기울임(Y축)

 

See the Pen transform2d by ssoyuni (@sssoyuni) on CodePen.

---

Transform 3D 변환 함수

-z축은 일반적으로 우리 눈에 보이지 않는다. 우리의 눈과 동일한 방향을 갖고 있기 때문이다.

1. 이동함수

• translate3d(x,y,z): 이동(X축, Y축, Z축)
• translateZ(z) : 이동(z축)

2. 크기 함수

• scale3d(x, y, z) : 크기(X축, Y축,Z축)
• scaleZ(z): 크기(Z축)

3. 회전 함수

• rotate3d(x,y,z):회전(X벡터, Y벡터, Z벡터, 각도)
• rotateX(x): 회전(X축)
• rotateY(y): 회전(Y축)
• rotateZ(z): 회전(Z축)

4. 원근법 함수

• 원근감을 부여해주기 위해 3차원 변형이 일어나는 요소 자체에 perspective 함수 부여
• perspective(n):원근법(거리)
• perspective(원근 거리)
• 원근감은 수치가 높을수록 더 멀리서 보는 것이기 때문에 원근감이 떨어짐
• 특정한 거리를 입력하면서 원근감을 조절할 수 있다.
• transform의 가장 앞부분에 선언해야 한다. (뒤에 입력시 적용이 안됨)

5. 전체를 아우르는 함수

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3차원 변환 효과

 

See the Pen transform3d by ssoyuni (@sssoyuni) on CodePen.

---

Transform 변환 속성

• 속성에 사용되는 함수가 아니라 별도의 속성

1. transform-origin

: 요소 변환의 기준점 설정

• 변환이 일어나는 특정한 기준점 위치 설정
• 방향 위치 반대로 써도 됨 ex) right bottom = bottom right
• X축 : 기본 값은 50%이고 특정한 키워드(left, right, center)와 %, 단위를 통해서 기준점 설정 가능
• Y축 : 기본 값은 50%이고 특정한 키워드(top, bottom, center)와 %, 단위를 통해서 기준점 설정 가능
• Z축 : 기본 값은 0이고 단위를 통해서 기준점 설정 가능

2. transform-style

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

• 특정한 요소에 3차원 변환 함수를 이용해 특정한 변환을 일으켰을 때 그 특정한 요소의 자식에서도 또다른 3차원 변환을 일으키는 것은 원래 허용 되지 않으나 그 3d로 변환 된 요소 자체에 이 속성 부여시 그 자식도 3d 변환 사용 가능하다.
• flat : 기본 값은 flat으로 3차원 변환된 요소의 자식은 추가적으로 3차원 변환 사용할 수 없다.
• preserve-3d: 설정시 3차원 변환된 요소의 자식요소도 추가적으로 3차원 변환을 또 쓸 수 있게 할 수 있다. 3차원변환을 자식에게 대물림 하면서 쓰고 싶으면 굉장히 중요하게 사용해야 할 속성
  • 주의 사항: 자식요소에만 3차원 변환 효과 허용 해주는 것이기에 자식의 자식으로 계속적으로 내려가는 거라면 이 값을 지속적으로 명시해 줘야 한다.

3. perspective

: 하위 요소(perspective함수와 다른점)를 관찰하는 원근 거리 설정

• 원근법 거리 설정
• 원근 거리 적절하게 설정
• 관찰하고자 하는 요소의 상위요소에 perspective 속성을 지정해야 한다.
• 일반적으로 px 단위로 입력
• 이것은 함수가 아니라 속성
• perspective 속성과 함수의 차이점 :
  • perspective 속성 : 적용 대상은 관찰 대상의 부모요소 이며 기준점 설정은 perspective-origin으로 설정
  • perspective 함수(transform : perspective( )) : 적용대상은 적용되는 관찰대상 자체이며 기준점 설정은 transform-origin
  • 관찰하는 대상이 여러 개면 perspective 속성을 쓰는 것이 좋고 관찰하는 대상이 하나면 perspective 함수를 관찰 대상자체에 적용시키는 것이 좋다.
  • perspective 속성은 관찰하는 대상이 여러 개 이기 때문에 부모(조상)요소에 적용해서 하위 요소를 관찰하는 원근 거리를 설정하는 개념이며 perspective 함수는 관찰하는 대상이 하나이기 때문에 그 하나에 직접적으로 적용해서 원근 거리를 설정한다.
• perspective 부분의 지켜보는 시점이 전제 뷰포트의 정중앙에서 지켜보게 됨. 그래서 perspective도 가로 너비를 일치시켜 주는 것이 중요하다.
• 단위 : px, em, cm 등 단위로 지정한다.

4. perspective-origin

: 원근 거리의 기준점(관찰하는 기준점) 설정

• perspective 속성이 부여된 조상 요소의 관찰대상을 보는 눈을 어디다 둘 것인가를 설정
• 원근거리의 기준점을 설정해서 내가 보는 시점을 위치를 바꿔서 보게 설정 할 수 있다.
• 기본 값일시 기준점은 perspective 속성을 적용한 요소의 정중앙이 된다.
• X축 : 기본 값은 50%이고 특정한 키워드(left, right, center)와 %, 단위를 통해서 더 정확하게 점 설정 가능
• Y축 : 기본 값은 50%이고 특정한 키워드(top, bottom, center)와 %, 단위를 통해서 더 정확하게준점 설정 가능

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

• 원래 요소를 rotateX와 rotateY를 통해 회전 시켰을 때 요소의 뒷면을 요소의 반전된 모습으로 볼 수 있었는데 이 속성 사용시 그 뒷면을 숨길 수 있다.
• visible : 기본 값으로 요소의 뒷면을 화면에 출력
• hidden : 요소를 뒤집었을 때 요소의 뒷면 안보이게하고 요소 자체를 숨기게 할 때 사용, 유용한 속성

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

• 요소의 2차원 변환(transforms) 효과 지정
• scale(), skew(), translate(), rotate() 아우르는 함수
• 브라우저는 matrix 함수를 사용시 연산하기 쉬워서 최적화가 잘되어있는 matrix 함수 사용
• 브라우저에서 사용해서 사용하는 용도, 최적화해서 사용하는 용도 등을 제외하곤 좀 더 직관 적인 일반 변환 함수를 사용한다.
• 요소에 일반 변환 함수(2d, 3d의 scale(), skew(), translate(), rotate() 등)를 사용하더라도 브라우저에 의해 matrix 함수로 다시 변환되서 적용이 된다. (2d 변환 함수는 6개의 인자를 받는 matrix 함수로 변환되서 적용, 3d 변환 함수는 16개의 인자를 받는 matrix3d 함수로 변환되서 적용)
• 여섯개의 인자 입력받는 2차원 변환 함수 (sin, cos 등이 포함되게 됨 그래서 사용 어려움)
• matrix(scale, skewY, skewX, scale, translateX, translateY)
  

  

 

See the Pen 변환 속성 by ssoyuni (@sssoyuni) on CodePen.