조건
1. 기존 사각형의 속성 중 배경 색을 yellow로 바꿉니다.
2. 배경 색이 천천히 바뀌도록 transition 속성을 사용하는데 적용 속성은 배경이고 진행 시간은 1초로 합니다.

연습문제 1~3

 

1. 13/quiz-1.html에 있는 사각형에 마우스 포인터를 올렸을 때 다음 조건에 맞게 transition속성을 적용하세요.

 

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  body {
    padding-top:50px;
    padding-left:50px;
  }
  .box {
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
    border-radius: 5px;
  }
</style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  body {
    padding-top:50px;
    padding-left:50px;
  }
  .box {
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
    border-radius: 5px;
  }
  .box:hover {
    background-color: yellow;
    transition-duration: 1s;
  }
</style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

 

 

2. 13/quiz-2.html문서를 열어 보면 이미지 파일이 화면에 삽입되어 있습니다. 이미지 위로 마우스 포인터를 올렸을 때 다음 조건에 맞게 이미지가 변형되도록 소스를 수정하세요.

조건
1. 이미지 20도 회전합니다.
2. 이미지 테두리가 1px짜리 검은 실선으로 바뀝니다.
3. 테두리의 모서리 부분을 10px만큼 둥글게 처리합니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  .container {
    width:500px;
    margin:50px auto;
  }
  .photo {
    border:1px solid #ccc;
  }
</style>
</head>

<body>
  <div class="container">
    <img src="images/coffee.jpg" class="photo">
  </div>
</body>
</html>

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  .container {
    width:500px;
    margin:50px auto;
  }
  .photo {
    border:1px solid #ccc;
  }
  .photo:hover {
    border: black solid;
    border-width: 1px;
    border-radius: 10px;
    transition: all;
    transform: rotate(20deg);
  }
</style>
</head>

<body>
  <div class="container">
    <img src="images/coffee.jpg" class="photo">
  </div>
</body>
</html>

 

 

3. transition 속성과 transform속성을 이용해 사진 위로 마우스 포인터를 가져갈 때 사진이 확대되는 애니메이션을 만들려고 합니다. 13/quiz-3.html 문서를 가져와 다음 조건에 맞게 수정하세요.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS3 트랜스폼과 트랜지션</title>
	<style>	
	.photo {	
        margin-top:50px;	
	    margin-left:100px;
	}
	</style>
</head>
<body>
	<img src="images/lamp.jpg" class="photo">	
</body>
</html>

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS3 트랜스폼과 트랜지션</title>
	<style>	
	.photo {	
        margin-top:50px;	
	    margin-left:100px;
	}
	.photo:hover {
		transition: all;
		transition-duration: 1s;
		transform:scale(150%, 150%);
		transform-origin: left top;
		box-shadow: 5px 5px 3px black;
	}
	</style>
</head>
<body>
	<img src="images/lamp.jpg" class="photo">	
</body>
</html>
저작자표시 비영리

'HTML > CSS3와 애니메이션' 카테고리의 다른 글

CSS3와 애니메이션  (0) 2021.08.23

변형(transform)

 

2차원 변형과 3차원 변형

'2차원 변형(2D transform)'은 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고 회전하는 것을 말합니다.

평면상에서 특정 요소를 이동, 회전, 왜곡시키는 것은 그 결과를 쉽게 예측할 수 있다. 2차원 좌표계에서 x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커집니다.

'3차원 변형(3D transform)'은 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것을 말합니다. 3차원 변형에서 z축은 앞뒤로 이동하는데 보는 사람쪽으로 다가올수록 값이 더 커지고 뒤로 갈수록 값이 작아집니다.

 

transform과 변형 함수

기본형 설명
transform:변형 함수; 이미지를 회전시키거나 이동하는일에 사용

 

2차원 변형 함수

2차원 변형함수는 최신 브라우저에서는 모두 지원되지만 인터넷 익스플로러 9를 비롯한 이전 브라우저를 위해 -webkit-과 -moz-, -ms-, -o-등의 브라우저 접두사를 붙여야합니다.

변형 함수 설명
translate(tx, ty) 지정한 크기만큼 x축과 y축으로 이동합니다.
translateX(tx) 지정한 크기만큼 x축으로 이동합니다.
translateY(ty) 지정한 크기만큼 y축으로 이동합니다.
scale(sx, sy) 지정한 크기만큼 x축과 y축으로 확대/축소합니다.
scaleX(sx) 지정한 크기만큼 x축으로 확대/축소합니다.
scaleY(sy) 지정한 크기만큼 y축으로 확대/축소합니다.
rotate(각도) 지정한 각도만큼 회전합니다.
skew(ax, ay) 지정한 각도만큼 x축과 y축으로 왜곡합니다.
skewX(ax) 지정한 각도만큼 x축으로 왜곡합니다
skewY(ay) 지정한 각도만큼 y축으로 왜곡합니다.

 

3차원 변형 함수

2차원 변형함수에 z축을 추가하면 3차원 변형 함수가 됩니다. 3차원 변형 함수도 최신브라우저에서는 모두 지원되지만 이전 브라우저를 위해-webkit-과 -moz-등의 브라우저 접두사를 붙여야 합니다. 인터넷 익스플로러의 경우, 10 이상에서 3차원 변형 함수를 지원하므로 -ms-접두사를 따로 사용하지 않습니다.

변형 함수 설명
matric3d(n [, n]) 4x4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환은 지정합니다.
translate3d(tx, ty, tz) 지정한 크기만큼 x축과 y축, z축으로 이동합니다.
translateZ(tz) 지정한 크기만큼 z축으로 이동합니다.
scale3d(sx, sy, sz) 지정한 크기만큼 x축과 y축, z축으로 확대/축소합니다.
scaleZ(sz) 지정한 크기만큼 z축으로 확대/축소합니다.
rotate3d(rx, ry, rz, 각도) 지정한 각도만큼 회전합니다.
rotateX(각도) 지정한 각도만큼 x축으로 회전합니다.
rotateY(각도) 지정한 각도만큼 y축으로 회전합니다.
retateZ(각도) 지정한 각도만큼 z축으로 회전합니다.
perspective(길이) 입체적으로 보일 수 있는 깊이 갚을 지정합니다.

 

translate 변형함수 - 요소 이동시키기

translate변형 함수는 2차원과 3차원에서 모두 사용 가능한 변형 함수입니다. 요소를 이동시킬 때 사용하는 함수입니다.

기본형 설명
transform:translate(tx, ty) x축 방향으로 tx만큼, y축 방향으로 ty만큼 이동합니다. ty의 기본값은 0입니다.
transform:translate3d(tx, ty, tz) x축 방향으로 tx만큼, y축 방향으로 ty만큼, z축방향으로 tz만큼 이동합니다.
transform:translateX(tx) x축 방향으로 tx만큼 이동합니다.
transform:translateY(ty) y축 방향으로 ty만큼 이동합니다.
transform:translateZ(tz) z축 방향으로 tz만큼 이동합니다.

 

 

scale 변형 함수 - 요소 확대/축소하기

값이 1보다 크면 확대, 작으면 축소됩니다.

기본형 설명
transform:scale(sx, sy) x축 방향으로 sx만큼 y축방향으로 sy만큼 확대합니다. sy의 기본값은 sx의 값입니다.
transform:scale3d(sx, sy, sz) x축 방향으로 sx만큼, y축 방향으로 sy만큼, z축방향으로 sz만큼 확대합니다.
transform:scaleX(sx) x축 방향으로 sx만큼 확대합니다
transform:scaleY(sy) y축 방향으로 sy만큼 확대합니다
transform:scaleZ(sz) z축 방향으로 sz만큼 확대합니다

 

rotate 변형 함수 - 요소 회전하기

지정한 각도만큼 웹 요소를 시계 방향이나 시계 반대반향으로 회전시키며 2차원 함수일 때와 3차원 함수일 때의 기본형이 다릅니다. 양수일 경우 시계방향으로 회전하고 음수일 경우 반시계방향으로 회전합니다.

2차원 함수 기본형 설명
transform:rotate(각도) 각도(degree)나 라디안(radian)값을 사용합니다.
3차원 함수 기본형 설명
transform:rotate(rx, ry, 각도) rx, ry기준으로 각도만큼 회전시킵니다
transform:rotate3d(rx, ry, rz, 각도) rx, ry rz기준으로 각도만큼 회전시킵니다
transform:rotateX(각도) X축으로 각도만큼 회전시킵니다.
transform:rotateY(각도) Y축으로 각도만큼 회전시킵니다.
transform:rotateZ(각도) Z축으로 각도만큼 회전시킵니다.

 

 

skew 변형 함수 - 요소를 비틀어 왜곡하기

skew변형 함수는 요소를 지정한 각도만큼 비틀어 왜곡합니다. 이때 양쪽 방향이나 한쪽 방향으로만 비틀 수 있습니다.

기본형 설명
transform:skew(ax, ay) x축으로 ax의 각도만큼, y축으로 ay의 각도만큼 왜곡시킵니다
transform:skew(ax) x축에서 주어진 각도만큼 왜곡합니다.
transform:skew(ay) y축에서 주어진 각도만큼 왜곡시킵니다.

 

 

변형과 관련된 속성들

transform-origin 속성 - 변형 기준점 설정하기

기본형 설명
transform-origin: <x축> <y축> <z축> | initial | inherit; 축이 아닌 특정 지점을 변형의 기준으로 설정한다.

transform-origin의 속성

속성 값 설명
<x축> 원점 기준의 x 좌푯값으로 길이 값이나 <백분율>, left, center, right 중에서 사용할 수 있습니다.
<y축> 원점 기준의 y 좌표값으로 길이 값이나 <백분율>, top,center, bottom 중에서 선택할 수 있습니다.
<z축> 원점 기준의 z 좌푯값으로 길이 값만 사용할 수 있습니다.

 

 

perspective, perspective-origin 속성 - 원근감 표현하기

perspective 속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 합니다. 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어집니다.

기본형 설명
perspective: <크기> | none; 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 한다.
perspective-origin: <x축 값> | <y축 값>; 입체적으로 표현할 요소의 아랫부분위치를 지정할 수 있습니다.
속성 값 설명
<크기> 원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지를 픽셀 크기로 지정합니다.
none perspective를 지정하지 않습니다. 기본값입니다.
속성 값 설명
<x축 값> 웹 요소가 x축에서 어디에 위치하는지를 지정합니다. 사용할 수 있는 값은 길이 값이나 백분율, left, right, center입니다. 기본 값은 50%입니다.
<y축 값> 웹 요소가 y축에서 어디에 위치하는지를 지정합니다. 사용할 수 있는 값은 길이 값이나 백분율, top, center, bottom입니다. 기본 값은 50%입니다.

 

transform-style속성 - 3D 변형 적용하기

여러 가지 변형을 동시에 적용할 때 transform-style속성을 사용하면 부모 요소에 적용한 3D 변형을 하위요소에도 적용할 수 있습니다.

기본 값 설명
transform-style: flat | perserve-3d transform의 3D변형 적용합니다.
속성 값 설명
flat 하위 요소를 평면으로 처리합니다.
preserve-3d 하위 요소들에 3D효과를 적용합니다.

 

 

backface-visibility속성 - 요소의 뒷면 표시하기

요소 회전할 때 각도가 90도를 넘으면 뒷면이 보이는데 반대쪽을 표시하거나 표시하지 않을 수 있는 속성이다.

기본형 설명
backface-visibility: visible | hidden 뒷면을 표시하거나 하지 않는다.
속성 값 설명
visible 뒷면을 표시합니다. 기본 값입니다.
hidden 뒷면을 표시하지 않습니다.

 

 

 

트랜지션

스타일이 바뀌는 시간을 조절해서 애니메이션 효과를 낼 수 있다. 스타일 속성이 바뀌는 것을 말합니다.(배경색 모양 등)

속성 설명
transition-property 트랜지션 대상을 설정합니다.
transition-duration 트랜지션 진행 시간을 설정합니다.
transition-timing-function 트랜지션 속도 곡선을 설정합니다.
transition-delay 트랜지션 지연 시간을 설정합니다.
transition transition-property와 transition-duration, transition-timing-function,transition-delay속성을 한꺼번에 설정합니다.

 

transition-property 속성 - 트랜지션을 적용할 속성 지정하기

트랜지션을 어느 속성에 적용할 것인지 선택하는 것입니다.

기본형 설명
transition-property: all | none | <속성 이름> 트랜지션을 어느 속성에 적용할 것인지 선택한다.
속성 값 설명
all all 값을 사용하거나 transition-property를 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 됩니다. 기본 값입니다.
none 트랜지션 동안 아무 속성도 바뀌지 않습니다.
<속성 이름> 트랜지션 효과를 적용할 속성 이름을 지정합니다. 속성이 여러 개일 경우, 쉼표(,)로 구분해 나열합니다.
기본형 설명
transition-property:all; 해당 요소의 모든 속성에 트랜지션 적용
transition-property:background-color; 해당 요소의 배경 색에 트랜지션 적용
transition-property:width, height 해당 요소의 너비와 높이에 트랜지션 적용

 

 

transition-duration속성 - 트랜지션 진행 시간 지정하기

transition-property에서 트랜지션 대상을 지정했다면 진행 시간을 지정해야 그 시간 동안, 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있습니다.

기본형 설명
transition-duration: <시간> transition의 진행시간을 지정하며 대상이 되는 속성이 여러 개라면 트랜지션 진행 시간도 쉼표(,)로 구분해 순서대로 여러개를 지정할 수 있다.

 

 

transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기

속성 값 설명
linear 시작부터 끝까지 똑같은 속도로 트랜지션을 진행합니다.
ease 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냅니다. 기본값입니다.
ease-in 시작을 느리게 시작합니다.
ease-out 느리게 끝냅니다.
ease-in-out 느리게 시작하고 느리게 끝냅니다.
cubic-bezier(n,n,n,n) 배지에 함수를 직접 정의해 사용합니다. n에서 사용할 수 있는 값은 0~1입니다.

 

transition-delay속성 - 지연 시간 설정하기

사용할 수 있는 값은 초(seconds)나 밀리초(milliseconds)이며 기본 값은 0s입니다.

기본형 설명
transition-delay: <시간> 트랜지션이 언제부터 시작할지를 지정합니다

 

transition 속성 - 트랜지션 속성 한꺼번에 표기하기

기본형 설명
transition: <transition-property 값> | <transition-duration 값> | <transition-timing-function 값> | <transition-delay 값> 속성 값의 나열 순서대로 적용한다. 속성, 진행시간, 속도 곡선, 지연 시간

 

 

 

애니메이션

CSS3의 animation속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다. 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 부드럽게 변합니다.

CSS 애니메이션에서 사용하는 속성

CSS 애니메이션을 만들 때 에니메이션이 바뀌는 지점(키프레임)은@keyframes속성을 이용해 정의하고 animation속성과 animation하위 속성을 이용해 애니메이션의 실행 시간이나 반복 여부 등을 지정합니다.

속성 설명
@keyframes <이름> { <선택자> { <스타일>} } 애니메이션이 바뀌는 지점을 설정(선택자)합니다.
animation-delay 애니메이션 지연 시간을 지정합니다.
animation-direction: normal | alternate 애니메이션 종료 후 처음부터 시작할지, 역방향으로 진행할지를 지정합니다.
animation-duration: <시간> 애니메이션 실행 시간을 설정합니다.
animation-fill-mode 애니메이션이 종료되었거나 지연되어 애니메이션이 실행되지 않는 상태일 때 요소의 스타일을 지정합니다.
animation-iteration-count: <숫자> | infinite 애니메이션 반복 횟수를 지정합니다.
animation-name: <키프레임 이름> | none @keyframes로 설정해 놓은 중간 상태의 이름을 지정합니다.
animation-play-state 애니메이션을 멈추거나 다시 시작합니다.
animation-timing-function 애니메이션의 속도 곡선을 지정합니다.
animation animation 하위 속성들을 한꺼번에 묶어 지정합니다.

 

저작자표시 비영리

'HTML > CSS3와 애니메이션' 카테고리의 다른 글

CSS3와 애니메이션 연습문제  (0) 2021.08.25

+ Recent posts

티스토리툴바