-
1. transform [변형]
: 객체를 변형하는 속성
: 요소에 회전, 크기 조절, 기울이기, 이동효과를 부여함
transform으로는 아무리 모양을 변형해도 자신의 고유축은 절대 변경불가
[2차원 변형과 3차원 변형]
- 2차원 변형은 단순히 수평이나 수직으로 이동하고 회전하는 것
- 3차원 변형은 z축을 추가해 원근감을 주는 것
transform과 변형 함수
transform : 변형 함수;
이미지를 회전시키거나 이동하는 등 변형하려면 transform 속성을 사용해야 합니다.
translate 변형 함수 - 요소 이동시키기
- 이 함수는 2차원과 3차원에서 모두 사용가능한 함수입니다.
transform : translate(x, y); transform : translate3d(X, Y, Z) transform : translateX(X) transform : translateY(Y) transform : translateZ(Z)
[2차원] transform: translateX(70px); / transform: translateY(70px); / transform: translate(70px, 70px); scale 변형 함수 - 요소 확대/축소하기
- 지정한 크기만큼 확대/축소합니다.
transform : scale(x, y); transform : scale3d(X, Y, Z) transform : scale(X) transform : scale(Y) transform : scale(Z)
[2차원] transform : scaleX(1.2) / scaleY(1.2) / scale(1.2) rotate 변형 함수 - 요소 회전하기
- 지정한 각도만큼 회전시킵니다.
- 회전 각도가 양수일 경우 시계 방향으로 회전하고 음수일 경우 반대 방향으로 회전합니다.
/* 2차원 함수 기본형 */ transform : rotate(각도) /* 3차원 함수 기본형 */ transform : rotate(x, y, 각도) transform : scale(Y) transform : scale(Z)
[2차원] transform: rotateX(45deg); / rotateY(45deg); / rotate(30deg); skew 변형 함수 - 요소를 비틀어 왜곡하기(기울이기)
- skew 함수는 2차원 변형만 가능합니다.
- 이 함수는 요소를 지정한 각도만큼 비틀어 왜곡합니다.
- 이때 한쪽 방향이나 양쪽 방향으로만 비틀 수 있습니다.
transform : skew(X,Y) transform : skewX(X) transform : skewY(Y)
transform: skewX(-45deg); / skewY(-45deg); / skew(45deg); 2. transform과 관련된 속성들
transform-origin 속성 - 변형의 중심축을 변경
이 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있습니다.
transform-origin : 0% 0%;
transform-origin : center center;
- 속성값은 백분율(%)과 키워드 중 하나로 지정할 수 있습니다.
- 백분율 0% , 50%, 100%
- 키워드 left, top, center, right, bottom
transform: rotate(45deg); transform-origin: center center; / 0% 0%; perspective, perspective-origin 속성 - 원근감 표현하기
perspective : 크기 | none;
-원래 위치에서 사용자가 있는 방향이나 반대방향으로 잡아당기거나 밀어내 원근감을 가지게 합니다.
-크기 400px ~ 1000px 사이 지정
transform-style 속성 - 3D 변형 적용하기
이 스타일을 사용하면 3D 변형을 하위 요소에도 적용할 수 있습니다.
- transform-style : preserve-3d;
--> 자식 요소의 3d변환을 사용
backface-visibility 속성 - 요소의 뒷면 표시하기
회전할 때 각도가 90도를 넘으면 뒷면이 보입니다.
하지만 보이고 싶지 않을때 이 속성을 사용합니다.
-- 사용시 유의사항 --
transform으로 3d효과를 만든 다음 부모에 모션을 적용하는 순간
자식요소의 3d효과가 강제 해제됨
해결방법 : 3d효과를 준 부모요소에 transform-style : preserve-3d; 적용
주의사항 : preserve-3d와 perspective를 같은 요소에 동시에 적용되면 모션이 깨진다.
예시1) 안좋은 방법 (X)
#wrap section {
perspective: 700px;
transform-style: preserve-3d;
}
예시2) 좋은 방법 (O)
#wrap { perspective: 700px; }
#wrap section { transform-style: preserve-3d; }
3. 트랜지션
트랜지션이란?
- 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것 처럼 스타일 속성이 바뀌는 것을 말합니다.
transition-property 속성 - 트랜지션을 적용할 속성 지정하기
/* 해당 요소의 모든 속성에 트랜지션 적용*/ transition-property: all; /* 해당 요소의 배경 색에 트랜지션 적용 */ transition-property: background-color; /* 해당 요소의 너비와 높이에 트랜지션 적용 */ transition-property: width, height;
transition-duration 속성 - 트랜지션을 진행시간 지정하기
transition-duration: <시간>
transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기
transition-timing-function : liner | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
transition-delay 속성 - 지연 시간 설정하기
transition-delay : <시간>
transition 속성 - 트랜지션 속성 한꺼번에 표기하기
transition : transition-property 값 | transition-duration 값 | transition-function 값 | transition-delay 값
4. 애니메이션
animation 속성
animation 속성은 애니메이션을 설정하거나 제어하는 역할을 담당합니다.
@keyframes 라는 속성과 함께 작성이 되어야 합니다.
/* css */ animation : name duration timing-function delay iteration-count direction fill-mode play-state;
animation : 이름 | 지속시간 | 속도 | 지연시간 | 반복횟수 | 진행방향 | 전후상태 | 재생/정지;
@keyframes 속성
애니메이션 지점 설정하기
[keyframes 속성 사용법]
@keyframes 이름 {
0% {}
50% {}
70% {}
100% {}
}
@keyframes 이름 {
to {}
50% {}
top {}
}
1. animation-name
애니메이션 이름 지정하기
@keyframes에 존재하는 애니메이션을 요소에 연결시켜주는 기능
/* 사용방법 */ animation-name : alpha;
2. animation-duration
애니메이션 지속 시간 설정하기
1s, 2s, 100s로 1초, 2초, 100초 등 다양하게 설정 가능하며, ms단위 또한 사용가능. 1s = 1000ms
/* 사용방법 */ animation-duration : 1s;
3. animation-timing-function
애니메이션 속도 곡선 지정하기
애니메이션이 빠르게 움직였다가 느려지거나, 일정하거나, 느렸다 빨라지는 등 속도 조절가능
- ease : 빠르게 ~ 느리게
- linear : 일정하게
- ease-in : 느리게 ~ 빠르게
/* 사용방법 */ animation-timing-function: linear;
4. animation-delay
애니메이션의 대기시간을 설정해주는 속성
1s의 값을 가지고 있으면 1초 후에 시작합니다.
(-1s의 값을 가지고 있으면 1초가 지났을 시점부터 시작을 합니다.)
/* 사용방법 */ animation-delay : 1s;
5. animation-iteration-count
애니메이션이 반복 횟수를 설정
기본적으로 한번 반복을 하는 것으로 설정이 되어 있습니다.
숫자가 아닌 무한반복을 원한다면 infinite를 입력
/* 사용방법 */ animation-iteration-count : infinite;
6. animation-direction
애니메이션 방향 지정하기
- normal : 기본 값
- reverse : 역방향
- alternate : 정방향 ~ 역방향으로 반복 (왕복)
- alternate-reverse : 역방향 ~ 정방향으로 반복 (왕복)
/* 사용방법 */ animation-direction : alternate;
7. animation-fill-mode 속성
애니메이션의 전후상태를 설정
즉, 시작위치와 끝위치를 설정하는 속성
(iteration-count 와 direction이랑 사용하지 말 것)
- none : 기존위치에서 시작, 기존위치에서 끝
- forwards : 애니메이션의 기존 위치에서 시작, 끝나는 위치에서 끝
- backwards : 애니메이션의 시작 위치에서 시작, 기존 위치에서 끝
- both : 애니메이션의 시작 위치에서 시작 끝, 위치에서 끝
/* 사용방법 */ animation-duration : both;
8. animation-play-state
애니메이션의 재생과 정지를 설정
running와 pause 두개의 속성을 가지고 있습니다.
/* 사용방법 */ animation-play-state : paused;
[참고 블로그]
blog.naver.com/takudaddy/221942561703
blog.naver.com/codbs7/221530831183
blog.naver.com/ane132/222267190183
반응형'코딩스터디 > CSS' 카테고리의 다른 글
css 다양한 클리핑 마스크 적용 (0) 2021.05.03 css filter속성 (0) 2021.05.01 [html,css 기초] Form 태그 정리 (0) 2021.04.20 [html,css 기초] table태그 총 정리 (0) 2021.04.20 반응형 작업(1) - 미디어 쿼리 (0) 2021.04.18 댓글