2차원 변형, 애니메이션
2차원 변형(transform)
. 텍스트나 이미지 박스를
- 회전
- 확대, 축소
- 이동
- 찌그러뜨리기 등 다양한 기하학적 모양으로 출력할 수 있다.
. 마우스를 올릴때 순간적으로 이러한 변화를 일으킬 수 있다.
종류
transform: translate(20px, -30px) : 20만큼 우측, 30만큼 위로 이동
transform: rotate(30deg) : 30도 회전
transform: scale (1.3, 0.7) : 가로 130% 확대, 세로 70% 축소
transform: skew(30deg, 20deg): 가로 30도, 세로 20도로 찌그러뜨리기
. 위치이동
translate(x,y)
translateX(n)
translateY(n)
. 확대/축소
scale(w,h)
scaleX(n)
scaleY(n)
. 회전 : rotate(angle)
. 기울임
skew(x-angle, y-angle)
skewX(angle)
skewY(angle)
<style type="text/css">
div[id]{
display: inline-block;
padding: 5px;
color: white;
background-color: olivedrab;
}
#rotate{transform: rotate(20deg)}
#skew {transform: skew(0deg, -20deg)}
#translate{transform:translateY(100px)}
#scale{transform:scale(3,1)}
#rotate:hover{transform:rotate(80deg)}
마우스를 올렸을때 회전
</style>
</head>
<body>
<h3>다양한 transform</h3>
<hr>
<div id="rotate">rotate 20deg</div>
<div id="skew">skew(0, -20deg)</div>
<div id="translate">translateY(100px)</div>
<div id="scale">scale(3,1)</div>
</body>
애니메이션 만들기
<style type="text/css">
img.infinite_rotating_log{
animation:rotate_image 20s linear infinite; 20초에 한바퀴
transform-origin: 50% 50%; 회전의 중심축
}
@keyframes rotate_image{
100%{
transform: rotate(360deg);
}
}
.logo-area{display: table; table-layout:fixed; width: 100%; height:100%}
.logo-area img{display: table-cell;}
</style>
</head>
<body>
<div class="Logo-area">
<img class="infinite_rotating_log" src="시계.png">
<img class="infinite_rotating_log" src="시계.png">
<img class="infinite_rotating_log" src="시계.png">
<img class="infinite_rotating_log" src="시계.png">
</div>
</body>
속성전환(transition)
- background
- color
- width, height 등 변환
구현방법
1) transition 형식
. property: 애니메이션 시킬 속성
. duration: 시작해서 끝날 때 까지 시간을 초단위로 지정(한 사이클 타임)
. timming function
- linear : 등속실행
- ease : 느리게 시작해서 빨라졌다가 다시 느려짐
- ease-in : 점점 빨라짐
- ease-out: 점점 느려짐
- ease-in-out: 처음과 끝이 느림
- cubic-bezier(n,n,n,n) 값을 입력해서 가속/감속을 조작
2) transition-delay: 0.5s - 0.5초 지나고 실행
<style type="text/css">
span{
transition: font-style, 5s;
}
span:hover {
font-size: 500%;
font-weight: bolder;
color: red;
}
</style>
</head>
<body>
<h3>font-size에 대한 전환</h3>
<hr>
<p><span>꽝!</span> 글자에 마우스를 올려보세요.</p>
</body>
<style type="text/css">
@keyframes textColor{
0% {color:blue;}
30% {color:green;}
100% {color:red;}
}
span{
animation-name: textColor;
animation-duration: 5s;
animation-iteration-count: infinite;
background-color: lightgray;
font-size: 100px;
}
</style>
</head>
<body>
<p><span>span</span>텍스트를 5초에 blue, green, red로 변환 무한반복</p>
</body>
<style type="text/css">
@keyframes bomb{
0%{
font-size: 500%;
color: red;
}
50%{
font-size: 100%;
color: blue;
}
100%{
font-size: 500%;
color: red;
}
}
h3{
animation-name: bomb;
animation-duration: 10s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h3>꽝!</h3>
<hr>
<p>꽝! 글자가 3초동안 500%에서 시작해서 100%로 바뀌는 애니메이션입니다.(무한반복)</p>
</body>
<style type="text/css">
@keyframes square
{
0%{background-color: #DB7093;
width:200px; height: 200px;}
25%{background-color:#90EE90;
width: 400px; height: 200px;
}
50%{background-color:#87CEFA;
width: 400px; height: 300px;}
75%{background-color:#7B68EE;
width: 200px; height: 300px;}
100%{background-color:#DB7093 ;
width: 200px; height: 200px;}
}
div{animation-name: square;
animation-duration: 4s;
animation-iteration-count: infinite;
overflow: hidden;
color: white;}
</style>
</head>
<body>
<h2>Animation</h2>
<div>Animation is my pleasure<br>
Animation work gives me great pleasure</div>
</body>