transform(변형)속성
interaction.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
/*
transform(변형)속성
객체를 회전하거나 스케일을 조절하거나 하는 변형 요소
기본값으로 활용하거나 이벤트에 적용하는 요소로도 사용할 수 있음.
translate()
-현재위치를 기준으로 해당 객체를 x축과 y축으로 지정된 수치만큼 이동시킴.
(px, %)
음수, 양수를 적용한 모든 숫자값을 의미하며, 음수면 반대로 양수면 정방향으로 이동하게 함.
그룹속성 translate(x,y)
값이 하나일 경우 z축만 적용
translate3d(x,y,z)
-z축은 일반적으로 확인할 수 없으나 persective를 설정하여 확인할 수 있음.
(z축은 %단위가 없음. px만 사용)
순서는 반드시 지켜서 기입함.
vender prefix : 호환성 부분을 위해 처리하는 일종의 핵
rotate : 객체 중심을 기준으로 회전
단위는 deg를 사용함.
그룹속성에서 하나의 값만 사용시 x,y축 둘 다 적용
scale()
객체 중심을 기준으로 수치만큼 비율을 늘리거나 줄임
기본값은1(100%), 1보다 크면 확대, 1보다 작으면 축소
위치값은 항상 객체의 가운데를 기준으로 하기 때문에,
화면을 벗어나는 경우도 있음.
transform-origin : rotate나 scale같이 객체의 중심을 기주으로 하는 경우
기준을 바꾸는 용도로 사용함.
px이나 %처럼 숫자단위로도 쓰일 수 있으며, 특정 위치값으로도 이동이 가능.
기본값은 50%, 50%
첫번째 값은 left, 두번째 값은 top임.
stew() 기울이기
해당 객체를 각도만큼 기울임. 단위는 deg
*/
div.box{
width: 100px;
height: 100px;
background-color: coral;
transform: skew(50deg);
/* transform: scale(1,5); */
/* transform-origin: left top; */
/* transform: rotate(45deg); */
/* 단위 : degree 자신의 중심을 기준으로 회전*/
/* transform: translateX(100px); */
/* -webkit-transform: translate(100px);/*chrome safari*/
/* -ms-transform: translate(100px);ie */
/* -moz-transform: translate(100px);firefox */
/* -o-transform: translate(100px);opera */
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
</html>transition
transition.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
transition
선택된 개체의 css의 속성값이 변화가 진행되는 진행시간을 적용하는 css효과
transition은 단독적으로 실행할 수 없음.
이벤트 요소와 결합하여 사용자가 특정 행동(이벤트)을 했을때
변화하는 css를 적용할때에 진행되는 시간을 넣어주는 역할.
transition 세부 속성
-property : transition 대상이 되는 css의 속성을 지정
속성이 많거나 단일 속성을 지칭할 수 없는 상황일 때
all이라고 표시해도 됨.
-duration : transition이 진행되는 지속시간
단위는 초(sec), 밀리세컨(ms)
1s = 1000ms
-delay : transition 진행 되기 전 지연시간.
단위는 초(s), 밀리세컨(ms)
-transition-timing-function : 진행시간 안에서 사건의 굴곡을 줄 수 있는 시간 속도 변화 속성
-liniear - 처음부터 끝까지 일정한 속도를 유지
ease - 느리게 시작--> 가속 --> 느리게 종료
ease-in - 느리게 시작 --> 가속하면서 종결(기본값)
ease -in-out - 느리게 시작 --> 가속 --> 느리게 종료 (ease보다 변화속도가 빠름)
ease-out 빠르게 시작 --> 감속하면서 종료
cubic-bezier : 사용자가 직접 만든 시간 함수
transition 그룹속성
transition : property(생략가능) duration(생략불가) delay(생략가능) function(생략가능) 순서에 유의
*/
div.box{
width: 300px;
height: 300px;
background-color: coral;
/* transition-property: background; */
/* transition-property: all;
transition-duration: 500ms;
transition-delay: 200ms; */
/* transition-timing-function: ease-in; */
transition: 500ms;
/* coral에서 pink로 변하는 시간 0.5초 */
}
div.box:hover{
background-color: pink;
}/* : 가상선택자*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>cube
cube.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>큐브 예제 만들어보기</title>
<style>
body, html, div{
margin: 0px;
left: 0px;
}
div.container{
width: 300px;
height: 300px;
perspective: 1000px; /*원근감*/
position: absolute;
top: 50%;
left: 50%;
/* margin-top: -150px;
margin-left: -150px; */
/* 정확한 수치 알아야 함*/
transform: translate(-50%, -50%);
/* 정확한 수치 몰라도 됨 */
}
div.cube{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
/* 원근감 줌 */
transition: 3000ms;
}
div.cube:hover{
transform: rotate3d(0,1,0,360deg);
/*
rotate3d(x,y,z,deg)
x,y,z,는 0과 1사이의 회전축
*/
}
div.cube_face{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
line-height: 300px;
}
.front{
background: aqua;
opacity: 0.7;
transform: translateZ(150px);
/* 튀어나온 정도 */
}
.back{
background-color: skyblue;
opacity: 0.7;
transform: rotateY(-180deg) translateZ(150px) ;
}
.left{
background-color: coral;
opacity: 0.7;
transform: rotateY(-90deg) translateZ(150px);
}
.right{
background-color: purple;
opacity: 0.7;
transform: rotateY(90deg) translateZ(150px);
}
.top{
background-color: yellow;
opacity: 0.7;
transform: rotateX(90deg) translateZ(150px);
}
.bottom{
background-color: brown;
opacity: 0.7;
transform: rotateX(-90deg) translateZ(150px);
}
.center{
width: 100px;
height: 100px;
background-color: white;
opacity: 0.5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<div class="cube_face front">front</div>
<div class="cube_face back">back</div>
<div class="cube_face right">right</div>
<div class="cube_face left">left</div>
<div class="cube_face top">top</div>
<div class="cube_face bottom">bottom</div>
<div class="center">center</div>
</div>
</div>
</body>
</html>애니메이션
animation.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
애니메이션
-html에 적용되는 css스타일을 다른 css스타일로 부드럽게 진행시키는 css3속성
특징은 진행시간안에 세부시간들을 시퀀스로 나눠 여러개의 프레임으로 다양한 효과들을 정리하여
적용할 수도 있음.
트랜지션으로 어느정도 간단한 애니메이션은 해결. but
특정 행동(마우스 개체 위에 올리기 등) 이후에 진행된다는 조건과
애니메이션보다 효과가 제한적이라는 단점이 존재함.
animation 속성
- name(필수속성)
keyframes와 연결하는 중요한 요소,
-duration(필수속성) : 진행시간
-delay(선택속성) : 애니메이션이 시작되기 전에 지연되는 시간
-iteration-count(선택속성)
애니메이션의 반복 횟수 설정
기본값 : 1회. 숫자만큼 카운트 반복
무한반복의 의미로 9999와 같은 값은 미리 메모리를 확보하는 과정에서
과부하의 원인이 되므로 infinite로 설정하는 것이 좋다.
-direction(선택속성) : 애니메이션이 종료후에 반복될때 진행방향 설정
normal(기본값) 0%시작 100% 종료
reverse : 100%시작 0%종료
alternate 홀수번(normal) 짝수번(reverse)
alternate-reverse : 홀수번(reverse) 짝수번(normal)
-fill-mode : 애니메이션이 종료 또는 대기 상태일때 스타일을 지정.
(무한반복이거나 delay가 없을 경우 확인 불가)
none - 기본값
대기 : 시작프레임(0%)에 설정된 스타일을 적용하지 않음
종료 : 실행 전 상태로 스타일을 되돌리고 종료
backwards
대기 : 시작프레임(0%)에 설정된 스타일을 적용하고 대기
종료 : 실행 전 상태로 스타일을 되돌리고 종료
forward
대기 : 시작프레임(0%)에 설정된 스타일을 적용하지 않음
종료 : 종료 프레임에 설정된 스타일을 적용하고 종료
both
대기 : 시작프레임(0%)에 설정된 스타일을 적용하고 대기
종료 : 종료 프레임에 설정된 스타일을 적용하고 종료
animation그룹속성
animation : name(필수) duration(필수) delay(선택) direction(선택)
timing(선택) count(선택)
duration과 delay순서 주의하기
fill-mode는 개별로만 사용.
*/
div.box{
width: 50px;
height: 50px;
margin-bottom: 20px;
background-color: coral;
animation-name: boxAni;
animation-duration: 2000ms;
animation-delay: 1000ms;
/* animation-iteration-count: infinite; */
/*실행할때마다 메모리 하나씩 늘림*/
/* animation-direction: reverse; */
animation-direction: alternate;
}
div.box01{
animation-timing-function: ease;
animation-fill-mode: none;
}
div.box02{
animation-timing-function: ease-in;
animation-fill-mode: backwards;
}
div.box03{
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
div.box04{
animation-timing-function: ease-out;
animation-fill-mode: both;
}
div.box05{
animation-timing-function: linear;
}
@keyframes boxAni{
0%{
background-color: green;
}
/* 50%{
background-color: pink;
} */
/* 2000ms의 50%, 즉 1초까지 pink로 바꾸기 */
100%{
/* background-color: green; */
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="box box01">
box
</div>
<div class="box box02">
box
</div>
<div class="box box03">
box
</div>
<div class="box box04">
box
</div>
<div class="box box05">
box
</div>
<div class="box box06">
box
</div>
</body>
</html>
가보자고