13-1 변형
2차원 변형과 3차원 변형
이미지 변형은 크게 '2차원 변형', '3차원 변형'으로 나뉜다.
-
2차원 변형 - 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고
회전하는 것을 말한다.
수평이나 수직으로 옮기는 것은 x축과y축 으로 이동하는 것이기 때문에 2차원 좌표를 사용하는데 2차원 좌표계에서 x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다. -
3차원 변형 - x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것을 말한다. 3차원 변형에서는 z축은 앞뒤로 이동하는데 보는 사람쪽으로 다가올수록 값이 더 커지고 뒤로 갈수록 값이 작아진다.
transform과 변형 함수
*기본형*
transform:변형 함수;
ex)
div {transform: translate(50px,100px);}이미지를 회전시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용해야 한다.
transform 속성 다음으로 올 수 있는 2차원 변형 함수,3차원 변형 함수의 종류가 있다.
버젼 낮은 브라우저를 위해 -webkit-과-moz-,-ms-,-o-등의 브라우저 접두사를 붙여야 한다.
-2차원 변형함수-
| 변형 함수 | 설 명 |
|---|---|
| translate(x, y) | 지정한 크기만큼 x축과 y축으로 이동한다. |
| translateX(x) | 지정한 크기만큼 x축으로 이동한다. |
| translateY(y) | 지정한 크기만큼 y축으로 이동한다. |
| scale(x,y) | 지정한 크기만큼 x축과 y축으로 확대/축소 한다. |
| scaleX(x) | 지정한 크기만큼 x축으로 확대/축소 한다. |
| scaleY(y) | 지정한 크기만큼 y축으로 확대/축소 한다. |
| rotate(각도) | 지정한 각도만큼 회전한다. |
| skew(x,y) | 지정한 각도만큼 x축과 y축으로 왜곡한다. |
| skewX(x) | 지정한 각도만큼 x축으로 왜곡한다. |
| skewY(y) | 지정한 각도만큼 y축으로 왜곡한다. |
| matrix(n, n, n, n, n, n,) | 수학 함수를 포함하는 6 개의 매개 변수를 사용하여 요소를 회전, 크기 조정, 이동 (변환) 및 기울이기 할 수 있다. |
-3차원 변형 함수-
| 변형 함수 | 설 명 |
|---|---|
| matrix3d(n[,n]) | 4*4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환을 지정 한다. |
| translate3d(x,y,z) | 지정한 크기만큼 x축,y축,z축으로 이동한다. |
| translateZ(z) | 지정한 크기만큼 z축으로 이동한다. |
| scale3d(x,y,z) | 지정한 크기만큼 x축과 y축,z축으로 확대/축소 한다. |
| scaleZ(z) | 지정한 크기만큼 z축으로 확대/축소 한다. |
| rotate3d(x,y,z,각도) | 지정한 각도만큼 회선한다. |
| rotateX(각도) | 지정한 각도만큼 x축으로 회전한다. |
| rotateY(각도) | 지정한 각도만큼 y축으로 회전한다. |
| rotateZ(각도) | 지정한 각도만큼 z축으로 회전한다. |
| perspective | 입체적으로 보일 수 있는 깊이 값을 지정한다. |
translate 변형 함수 - 요소 이동시키기
*기본형* transform : translate(x,y); transform : translate(x,y,z); transform : translate(x); transform : translate(y); transform : translate(z);
scale 변형 함수 - 요소 확대/축소하기
*기본형* transform : scale(x,y); transform : scale3d(x,y,z); transform : scaleX(x); transform : scaleY(y); transform : scaleZ(z);
rotate 변형 함수 - 요소 회전하기
*기본형* transform : rotate(x,y,각도); transform : rotate3d(x,y,z, 각도); transform : rotateX(각도); transform : rotateY(각도); transform : rotateZ(각도);
<head>
<title>scale</title>
<style>
* {
margin: 0;
padding: 0;
background-color: black;
}
img {
width: 200px;
height: auto;
}
.origin {
width: 100%;
}
div>div {
perspective: 200px;
float: left;
margin: 50px;
border: 5px solid red;
box-sizing: border-box;
}
/* 시계 방향으로 20도 회전 */
div.origin div.rotate1 img:hover {
transform: rotate(20deg);
}
/* 시계 반대 방향으로 40도 회전 */
div.origin div.rotate2 img:hover {
transform: rotate(-40deg);
}
/* x축을 기준으로 시계 방향으로 45도 회전 */
div.origin div.rotateX img:hover {
transform: rotateX(45deg);
}
/* y축을 기준으로 시계 방향으로 45도 회전 */
div.origin div.rotateY img:hover {
transform: rotateY(45deg);
}
/* z축을 기준으로 시계 방향으로 45도 회전 */
div.origin div.rotateZ img:hover {
transform: rotateZ(45deg);
}
/* x축:2.5, y축:1.2, z축 -1.5, 각도(회전) */
div.origin div.rotateXYZ img:hover {
transform: rotate3d(2.5, 1.2, -1.5, 45deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="rotate1"><img src="images/img3.jpg" alt="어피치,라이언"/></div>
<div class="rotate2"><img src="images/img3.jpg" alt="어피치,라이언"/></div>
<div class="rotateX"><img src="images/img3.jpg" alt="어피치,라이언"/></div>
<div class="rotateY"><img src="images/img3.jpg" alt="어피치,라이언"/></div>
<div class="rotateZ"><img src="images/img3.jpg" alt="어피치,라이언"/></div>
<div class="rotateXYZ"><img src="images/img3.jpg" alt="어피치,라이언"/></div>
</div>
</body>skew 변형 함수 - 요소를 비틀어 왜곡하기
*기본형* transform : skew(x,y,각도); transform : skewX(x); transform : skewY(y);
<head>
<title>skew</title>
<style>
* {
margin: 0;
padding: 0;
background-color: black;
}
img {
width: 200px;
height: auto;
}
.origin {
width: 100%;
}
div>div {
perspective: 200px;
float: left;
margin: 50px;
border: 5px solid red;
box-sizing: border-box;
}
div.origin div.skewX img:hover {
transform: skewX(30deg);
}
div.origin div.skewY img:hover {
transform: skewY(15deg);
}
div.origin div.skew img:hover {
transform: skew(-25deg, -15deg);
}
</style>
</head>
<body>
<div class="origin">
<div class="skewX"><img src="images/img4.jpg" alt="제이지"/></div>
<div class="skewY"><img src="images/img4.jpg" alt="제이지"/></div>
<div class="skew"><img src="images/img4.jpg" alt="제이지"/></div>
</div>
</body>13-2변형과 관련된 속성들
변형 함수로 2원 변형에 원근감을 추가하면 3차원 변형을 만들 수 있는데 단순히 z축만 추가한다고 해서 원근감이 생기지는 않는다.
변형할 때 기준이 되는 지점을 바꾸거나 요소의 원근감을 표현하기 위한 다른 속성도 필요하다.
transform-origin 속성 - 변형 기준점 설정하기
*기본형*
2차원,3차원 변형 모두 에서 사용가능
transform-origin : <x축> <y축> <z축> | initial | inherit;transform-origin 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다.
| 속성 값 | 설 명 |
|---|---|
| x축 | 원점 기준의 x 좌푯값으로 길이 값이나 <백분율>,left,center,right 중에서 사용할 수 있다. |
| y축 | 원점 기준의 y 좌푯값으로 길이 값이나 <백분율>,top,center,bottom 중에서 사용할 수 있다. |
| z축 | 원점 기준의 z 좌푯으로 '길이 값'만 사용할 수 있다. |
<head>
<title>transform-origin</title>
<style>
* {
margin: 0;
padding: 0;
background-color: black;
}
img {
width: 200px;
height: 200px;
}
div.origin {
float: left;
width: 200px;
height: 200px;
margin: 50px;
border: 5px solid red;
/* box-sizing: border-box; */
}
.peach {
transform: rotateZ(10deg);
}
/* 왼쪽 윗부분을 기준으로 변형 */
.left-top .peach {
transform-origin: left top;
}
/* 오른쪽 윗부분을 기준으로 변형 */
.right-top .peach {
transform-origin: right top;
}
/* 왼쪽 아랫부분을 기준으로 변형 */
.left-bottom .peach {
transform-origin: left bottom;
}
/* 오른쪽 아랫부분을 기준으로 변형 */
.right-bottom .peach {
transform-origin: right bottom;
}
</style>
</head>
<body>
<div class="wrap">
<div class="origin">
<div class="left-top">
<img src="images/img5.jpg" class="peach">
</div>
</div>
<div class="origin">
<div class="right-top">
<img src="images/img5.jpg" class="peach">
</div>
</div>
<div class="origin">
<div class="left-bottom">
<img src="images/img5.jpg" class="peach">
</div>
</div>
<div class="origin">
<div class="right-bottom">
<img src="images/img5.jpg" class="peach">
</div>
</div>
</div>
</body>perspective, perspective-origin 속성 - 원근감 표현하기
*기본형*
3차원 변형 속성
perspective: <크기> | none;perspective
원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 한다.
속성 값은 0보다 커야 하고, 값이 클수록 사용자로부터 멀어진다.
| 속성 값 | 설 명 |
|---|---|
| 크기 | 원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정한다. |
| none | perspective를 지정하지 않는다. *기본 값* |
perspective-origin
*기본형*
perspective-origin : <x축 값> | <y축 값>perspective-origin 속성을 사용하면 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 만들 수 있다.
- perspective 속성이 함께 지정되어 있어야 한다.
- 기본형에 나열된 순서대로 값을 입력해야 한다.
| 속성 값 | 설 명 |
|---|---|
| x축 값 | 웹 요소가 x축에서 어디에 위치하는지를 지정한다. 사용할 수 있는 값은 길이 값이나 %, left,center,right 이다. (기본 값은 50%) |
| y축 값 | 웹 요소가 y축에서 어디에 위치하는지를 지정한다. 사용할 수 있는 값은 길이 값이나 %, top,center,bottom 이다. (기본 값은 50%) |
ex) x축 기준으로 이미지를 회전시겼을 때와 x축 기준으로 회전시키는 동시에 perspective:300px로 원근감을 주었을 때를 비교한 것이다.
transform-style속성 - 3D 변형 적용하기
*기본형*
transform-style: flat | preserve-3dtransform-style 속성을 사용하면 부모 요소에 적용한 3D 변형을 하위요소에 적용할 수 있다.
| 속성 값 | 설 명 |
|---|---|
| flat | 하위 요소를 평면으로 처리한다. |
| preserve-3d | 하위 요소들에 3D효과를 적용한다. |
<head>
<title>transform-style</title>
<style>
* {
background-color: black;
}
.wrap .container{
margin: 100px 50px;
float: left;
border: 2px solid red;
perspective: 500px;
}
/* y축 기준으로 회전 */
.box1 {
width: 300px;
height: 200px;
background-color: #82cbd8;
transform: rotateY(45deg);
}
/* 왼쪽 윗부분 꼭지점을 기준으로 x축 회전 */
.box2 {
width: 300px;
height: 200px;
background-color: #0d6097;
transform-origin: left top;
transform: rotateX(45deg);
}
#trans-style1 {
transform-style: flat;
}
#trans-style2 {
transform-style: preserve-3d;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<div class="box1" id="trans-style1">
<div class="box2"></div>
</div>
</div>
<div class="container">
<div class="box1" id="trans-style2">
<div class="box2"></div>
</div>
</div>
</div>
</body>backface-visibility 속성 - 요소의 뒷면 표시하기
*기본형*
backface-visibility: visible | hidden| 속성 값 | 설 명 |
|---|---|
| visible | 뒷면을 표시한다. (기본 값) |
| hidden | 뒷면을 표시하지 않는다. |
13-3 트랜지션
트랜지션(transition)이란 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 말한다.
-트랜지션 속성-
| 속 성 | 설 명 |
|---|---|
| transition-property | 트랜지션 대상을 설정한다 |
| transition-duration | 트랜지션 진행 시간을 설정한다. |
| transition-timing-function | 트랜지션 속도 곡선을 설정한다. |
| transition-delay | 트랜지션 지연 시간을 설정한다. |
| transition | 속성들을 한꺼번에 설정한다. |
transition-property 속성 - 트랜지션을 적용할 속성 지정하기
*기본형*
transition-property : all | none | <속성 이름>transition-property는 어느 속성에 적용할 것인지 선택하는 것이다.
사용하지 않을 경우, 모든 속성이 트랜지션 대상이 되고 특정 속성 이름을 입력하면 그 속성에 트랜지션이 적용된다.
| 속성 값 | 설 명 |
|---|---|
| all | all 값을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 된다. (기본 값) |
| none | 트랜지션 동안 아무 속성도 바뀌지 않는다. |
| <속성 이름> | 트랜지션 효과를 적용할 속성 이름을 지정한다. (속성이 여러개일 경우 쉼표(,)로 구분한다.) |
transition-property 속성을 이용해서 트랜지션 대상을 지정할 수 있다.
/* 해당 요소의 모든 속성에 트랜지션 적용 */
transition-property : all;
/* 해당 요소의 배경 색에 트랜지션 적용 */
transition-property : background-color;
/* 해당 요소의 너비와 높이에 트랜지션 적용 */
transition-property : width, height;transition-duration 속성 -트랜지션 진행시간 지정하기
*기본형*
transition-duration: <시간>;transition-duration속성은 진행 시간이 0초를 기본으로 설정 되어있다. 이때 시간 단위는 초(seconds) 또는 밀리초(milliseconds)이다. 트랜지션 대상이 되는 속성이 여러 개라면 트랜지션 진행 시간도 쉼표(,)로 구분해 순서대로 여러 개를 지정할 수 있다.
만약 transition-property속성에서 지정한 값의 개수와 transition-duration 속성에서 지정한 값의 개수가 일치하지 않으면 transition-duration에서 지정한 시간이 처음 속성 값에 적용되고 다시 다른 속성 값에 반복 적용된다.
transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기
*기본형*
transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
시작과 중간, 끝에서의 속도를 지정해 속도 곡선을 만들 수 있다.
| 속성 값 | 설 명 |
|---|---|
| linear | 시작부터 끝까지 "똑같은 속도"로 트랜지션을 진행한다. |
| ease | 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다 (기본 값) |
| ease-in | 시작을 느리게 한다. |
| ease-out | 느리게 끝낸다. |
| ease-in-out | 느리게 시작하고 느리게 끝낸다. |
| cubic-bezier(n,n,n,n) | 베지에 함수를 직접 저으이해서 사용한다. n에서 사용할 수 있는 값은 0~1이다. |
transition-delay 속성 - 지연 시간 설정하기
*기본형*
transition-delay : <시간>;트랜지션이 두개 이상 있을 때 하나의 트랜지션이 끝나고 다음 트랜지션이 언제부터 시작할 것인지를 설정한다.
사용할 수 있는 값은 초(seconds)나 밀리초(milliseconds)이며 기본 값은 0s이다.
transition-delay에서도 여러 값을 지정할 수 있고 그 값들은 transition-property에서 지정한 대상에 차례대로 적용된다.
13-4 애니메이션
CSS 애니메이션은 시작과 끝나는 사이에 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다. 이때 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)라고 한다.
CSS 애니메이션에서 사용하는 속성
CSS 애니메이션을 만들 때 애니메이션이 바뀌는 지점(keyframe)은
@keyframes 속성을 이용해 정의하고, animation 속성과 animation 하위 속성을 이용해 애니메이션의 실행 시간, 반복 여부등을 지정한다.
-animation 속성-
| 속 성 | 설 명 |
|---|---|
| @keyframes | 애니메이션이 바뀌는 지점을 설정한다. |
| animation-delay | 애니메이션 지연 시간을 지정한다. |
| animation-direction | 애니메이션 종료 후 처음부터 시잘할지, 역방향으로 진행할지를 지정한다. |
| animation-duration | 애니메이션 실행 시간을 설정한다. |
| animation-fill-mode | 애니메이션 종료되거나 지연되어 실행되지 않는 상태일 때 요소의 스타일을 지정한다. |
| animation-iteration-count | 애니메이션 반복 횟수를 지정한다. |
| animation-name | @keyframes로 설정해 놓은 중간 상태의 이름을 지정한다. |
| animation-play-state | 애니메이션 멈추거나 다시 시작한다. |
| animation-timing-function | 애니메이션 속도 곡선을 지정한다. |
| animation | animation 하위 속성들을 한꺼번에 묶어 지정한다. |
@keyframes 속성 - 애니메이션 지점 설정하기
*기본형*
@keyframes <이름> {
<선택자> {
<스타일>
}
}- 1 '이름'으로 애니메이션을 구별해 주고
- 2 스타일 속성 값이 바뀌는 지점은 '선택자'로 입력한다.
- 3 애니메이션 중간 지점을 추가하려면 시작 위치를 0%,
끝 위치를 100%로 놓고 50% 위치에 키프레임을 하나 더 추가하면 된다. - 4 시작과 끝 위치만 사용했다면 0%,100% 대신 from,to 키워드를
사용해도 된다.
before
after
animation-name 속성 - 애니메이션 이름 지정하기
기본형
animation-name : <키프레임 이름> | none;
CSS로 애니메이션을 만들 때 @keyframes 속성을 이용해 여러 개의 애니메이션을 정의하는데 animation-name 속성에서 지정한 애니메이션 이름으로 구분한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@keyframes</title>
<style>
div {
width: 300px;
height: 300px;
background-color: darkcyan;
/* 애니메이션 이름 지정*/
animation-name: change-bg;
animation-duration: 3s;
}
/* 애니메이션 이름 사용*/
@keyframes change-bg {
from {
background-color: darkcyan;
border: 1px solid black;
}
to {
background-color: dodgerblue;
border: 1px solid blue;
border-radius: 150px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>animation-duration 속성 - 애니메이션 실행 시간 설정하기
*기본형*
animation-duration: <시간>- 기본값은 0이기 때문에 속성 값을 정하지 않으면 애니메이션은 일어나지 않는다.
animation-direction 속성 - 애니메이션 방향 지정하기
*기본형*
animation-direction : normal | alternate기본적으로는 애니메이션이 한 번 실행되면 원래 위치로 돌아가는데
animation-direction속성을 이용하면 원래 위치로 되돌아가거나 반대 방향으로 애니메이션을 한 번 더 실행할 수 있다.
| 속성 값 | 설 명 |
|---|---|
| normal | 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아간다. (기본 값) |
| alternate | 애니메이션을 끝까지 실행하면 왔던 방향으로 되덜아가면서 애니메이션을 실행한다. |
animation-iteration-count 속성 - 반복 횟수 지정하기
*기본형*
animation-iteration-count: <숫자> | infinite애니메이션 실행 후 반복적으로 실행 하고 싶을 때 사용하는 속성이다.
| 속성 값 | 설 명 |
|---|---|
| <숫자> | 입력한 숫자만큼 반복한다. (기본 값은 1이다.) |
| infinite | 무한 반복한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-interation-count</title>
<style>
div.box {
height: 60px;
margin: 50px 0 100px 0;
padding: 20px;
animation-name: moving;
animation-duration: 3s;
/* 애니메이션이 끝난 후 반대 방향으로 실행하지 않음 */
animation-direction: normal;
/* 애니메이션이 끝난 후 무한반복 */
animation-iteration-count: infinite;
}
@keyframes moving {
from {
width: 200px;
background: #faef7c;
opacity: 0.5;
transform: scale(0.5) rotate(15deg);
}
to {
width: 400px;
background: #ff9400;
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box"><h3>CSS3 Animation</h3></div>
</body>
</html>animation-timing-function 속성 - 애니메이션 속도 곡선 지정하기
트랜지션과 마찬가지로 애니메이션에서도 애니메이션의 시작과 중간, 끝에서의 속도를 선택해 전체적인 속도 곡선을 지정할 수 있다.
*기본형*
animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)animation 속성 - 애니메이션 관련 속성 한꺼번에 표기하기
길고 복잡한 애니메이션 관련 속성들을 animation속성을 사용하면 간단히 한 줄로 표기할 수 있다. 그리고 간략히 표기해 기본 값을 사용하더라도
animation-duration속성 값은 반드시 표기해야 한다. 애니메이션 실행 시간을 지정하지 않으면 기본 값0이 적용되어 애니메이션 효과를 볼 수 없다.
*기본형*
나열된 속성 값 순서대로 값을 입력해야 된다.
animation : animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation 속성</title>
<style>
div.box {
width: 60px;
height: 60px;
margin: 60px;
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}
@keyframes rotate {
from {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
to {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}
@keyframes background {
from {
background: red;
}
50% {
background: green;
}
to {
background: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
안녕하세요~