[HTML, CSS] - CSS 변형

 

---

 

 

---

 

변형(Transform)

 HTML 요소의 동작, 회전, 크기 변경, 기울기 조절

 2D 변형(transform)과 3D 변형(transform)

 

CSS 좌표 체계

기준점 :브라우저의 왼쪽 상단

Z축은 : 입체적인 방향, 모니터를 바라보는 방향을 가리키는 좌표축

 

 

---

 

2D 변형(transform)

 

 

2D transform 속성

 

transform 

요소에 2D 또는 3D 변형(transform) 적용

 

transform-origin 

요소에 변형(transform)을 적용하는 변환 중심 설정

 

 

2D transform 메소드

 

translate()

현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동

주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동

 

matrix(n,n,n,n,n,n)

6개의 매개변수로 모든 2D 변형 메소드를 한 번에 설정함. 

2D 변형(transform)과 관련된 6개의 매개변수

순서 : matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

 

translate(x,y)

현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킴. 

 

translateX(n)

현재 위치에서 해당 요소를 주어진 x축의 거리만큼 이동시킴. 

 

translateY(n)

현재 위치에서 해당 요소를 주어진 y축의 거리만큼 이동시킴. 

 

rotate(각도)

해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전

주어진 각도가 양수이면 시계 방향으로, 음수이면 반시계 방향으로 회전

 

scale(x,y)

해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임. 

주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기 감소

 

scaleX(n)

해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임. 

주어진 각도가 양수이면 x축의 양의 방향으로, 음수이면 x축의 음의 방향으로 기울임

 

scaleY(n)

해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임. 

주어진 각도가 양수이면 y축의 양의 방향으로, 음수이면 y축의 음의 방향으로 기울임

 

skew(x축각도,y축각도)

해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울임. 

 

skewX(각도)

해당 요소를 주어진 각도만큼 x축 방향으로 기울임. 

 

skewY(각도)

해당 요소를 주어진 각도만큼 y축 방향으로 기울임.

 

 

---

 

3D 변형(transform)

rotate3d(), translate3d(), scale3d() 메소드와 같이 입체적으로 보여지는 3D 변형에 관련된 메소드는 원근감을 표현할 기준명시

 

 

3D transform 속성

 

transform 

요소에 2D 또는 3D 변형(transform) 적용

 

transform-origin 

요소에 변형(transform)을 적용하는 변환 중심 설정

 

transform-style

요소에 변형을 적용할 때 그 변환이 자식(child) 요소들에게도 적용될지 안 될지를 설정

 

perspective

3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정

 

perspective-origin

3D 요소에 원근감을 표현할 때 사용할 기준 축을 설정

 

backface-visibility

요소의 앞면만을 표현하고, 뒷면을 표현할지 안 할지를 설정

 

 

 

3D transform 메소드

 

matrix3d(n×16)

4x4 행렬을 이용한 16개의 매개변수로 모든 3D 변형 메소드를 한 번에 설정

 

rotate3d(x,y,z,angle)

해당 요소를 주어진 각도만큼 x축, y축과 z축을 기준으로 회전

 

rotateX(angle)

해당 요소를 주어진 각도만큼 x축을 기준으로 회전

주어진 각도가 양수이면 x축 양의 방향으로, 음수이면 x축 음의 방향으로 회전

 

rotateY(angle)

해당 요소를 주어진 각도만큼 y축을 기준으로 회전

주어진 각도가 양수이면 y축 양의 방향으로, 음수이면 y축 음의 방향으로 회전

 

rotateZ(angle)

해당 요소를 주어진 각도만큼 z축을 기준으로 회전

주어진 각도가 양수이면 z축 양의 방향으로, 음수이면 z축 음의 방향으로 회전

 

 translate3d(x,y,z)

현재의 위치에서 해당 요소를 주어진 x축, y축과 z축의 거리만큼 이동

주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동

 

translateX(x)

현재의 위치에서 해당 요소를 주어진 x축의 거리만큼 이동

 

translateY(y)

현재의 위치에서 해당 요소를 주어진 y축의 거리만큼 이동

 

translateZ(z)

현재의 위치에서 해당 요소를 주어진 z축의 거리만큼 이동

 

scale3d(x,y,z)

해당 요소의 크기를 주어진 배율만큼 x축, y축과 z축 방향으로 늘리거나 줄임

 

scaleX(x)

해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임.

 

scaleY(y)

해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임.

 

scaleZ(z)

해당 요소의 z축 크기를 주어진 배율만큼 늘리거나 줄임.

 

perspective(n)

3D 요소에 원근감을 표현할 때 사용할 픽셀 수를 설정

 

 

---

 

전환(transition)

전환 효과와 변형 효과를 동시 사용 가능

 

 

전환 속성

transition

모든 transition 속성을 이용한 스타일을 한 줄에 설정

여러 속성을 동시에 변경 가능

 

1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정

2. 추가할 전환 효과가 지속될 시간을 설정

   transition: width 1s, height 3s;

transition-timing-function

전환(transition) 효과의 시간당 속도를 설정

 

속성 값

linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행

ease : 기본값, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려짐

ease-in : 전환(transition) 효과가 천천히 시작

ease-out : 전환(transition) 효과가 천천히 끝남

ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝남

cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

 

transition-delay

전환 효과가 나타나기 전까지의 지연 시간을 설정

전환 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작

 

transition-property

요소에 추가할 전환(transition) 효과를 설정

 

transition-duration

전환(transition) 효과가 지속될 시간을 설정

 

 

---

 

Animation

요소의 현재 스타일을 다른 스타일로 천천히 변화

 

 

@keyframes 규칙

특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시

애니메이션 효과가 동작하기 위해서는 먼저 animation-name 속성을 이용하여 요소와 키 프레임을 연결

@keyframes 규칙 안에 CSS 스타일을 설정하면 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천히 변화

재생이 모두 끝난 애니메이션 효과는 해당 요소가 맨 처음 가지고 있던 스타일로 요소를 되돌림

<style>
    p {
        -webkit-animation-name: movingPara;
        -webkit-animation-duration: 3s;
        animation-name: movingPara;
        animation-duration: 3s;
    }
    @keyframes movingPara {
        from { margin-left: 100%; }
        to { margin-left: 0%; }
    }
</style>

 

from 키워드 : 처음 스타일을 명시

to 키워드 : 마지막 스타일을 명시

 

복잡한 애니메이션 효과에서는 % 사용

0% : 처음 스타일

100% : 마지막 스타일

 

 

animation 속성

 

animation

모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

 

animation-name

애니메이션 효과의 이름을 설정

 

animation-duration

애니메이션 효과를 재생할 시간을 설정

재생 시간의 기본값은 0초이므로, 재생할 시간을 명시하지 않으면 아무런 효과도 나타나지 않음

 

animation-delay

애니메이션 효과가 나타나기까지의 지연 시간을 설정

애니메이션 효과는 이 속성값으로 설정된 시간이 흐른 뒤에야 비로소 시작

 

animation-iteration-count

애니메이션 효과가 몇 번 반복횟수 설정

이 속성값으로 infinite를 설정하면, 애니메이션 효과가 무한히 반복

 

animation-direction

애니메이션의 진행 방향을 설정

 

진행 방향을 나타내는 속성값

• reverse
  • 애니메이션 효과의 진행 방향을 원래 방향이 아닌 반대 방향으로 변경
  • from에서 to 방향이 아닌, to에서 from 방향으로 진행
• alternate
  • 애니메이션 효과의 진행 방향을 애니메이션이 반복될 때마다 계속 변경,
  • from에서 to 방향으로 한 번 진행되고 나면, 다음번에는 to에서 from 방향으로 진행
  • 번갈아 가면서 전체 반복 횟수만큼 애니메이션을 반복

 

animation-timing-function

애니메이션 효과의 시간당 속도를 설정

 

속성값

linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행

ease : 기본값으로, 애니메이션 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려짐

ease-in : 애니메이션 효과가 천천히 시작

ease-out : 애니메이션 효과가 천천히 끝남

ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝남

cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

 

animation-fill-mode

애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정

 

animation-play-state

애니메이션 효과의 재생 상태를 설정

 

animation shorthand

모든 animation 속성을 이용한 스타일을 한 줄에 설정

<style>
    #long {
        -webkit-animation-name: myShorthand;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-delay: 1s;
        -webkit-animation-iteration-count: 3;
        -webkit-animation-direction: reverse;
        animation-name: myShorthand;
        animation-duration: 3s
        animation-timing-function: ease-in-out;
        animation-delay: 1s;
        animation-iteration-count: 3;
        animation-direction: reverse;
    }

    #short {
        -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
        animation: myShorthand 3s ease-in-out 1s 3 reverse;
    }
</style>

 

 

---

 

https://www.tcpschool.com/css/css3_transform_animation

https://www.tcpschool.com/css/css3_transform_transition

https://www.tcpschool.com/css/css3_transform_2Dtransform

https://www.tcpschool.com/css/css3_transform_3Dtransform