2D transform / animation 속성 활용
[ 2D transform 속성의 활용 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01_2D transform속성을 활용한 변환</title>
<style>
*{margin: 0;
padding: 0;}
div{
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
margin: 10px;
}
div p{
width: 100%;
height: 100%;
background-color: lightblue;
opacity: 0.8;
}
.translate, .scale, .skew, .rotate{
border: 3px solid red;
width: 100%;
height: 600px;
overflow: hidden;
}
.translate div:nth-of-type(1) p{
background-color: red;
transform: translate(50px, 100px);
}
.translate div:nth-of-type(2) p{
background-color: green;
transform: translateX(50px);
}
.translate div:nth-of-type(3) p{
background-color: blue;
transform: translateY(50px);
}
.translate div:nth-of-type(4) p{
background-color: purple;
transform: translateZ(150px);
}
.scale div:nth-of-type(1) p{
transform:scale(0.8,0.5);
}
.scale div:nth-of-type(2) p{
transform:scale(0.8);
}
.scale div:nth-of-type(3) p{
transform:scale(1.1);
}
.scale div:nth-of-type(4) p{
transform:scale(0.8);
}
.skew div:nth-of-type(1) p{
transform:skew(45deg, 30deg);
}
.skew div:nth-of-type(2) p{
transform:skewX(45deg);
}
.skew div:nth-of-type(3) p{
transform:skewY(45deg);
}
.skew div:nth-of-type(4) p{
transform:skewZ(45deg);
}
.rotate div:nth-of-type(1) p{
transform:rotate(30deg);
}
.rotate div:nth-of-type(2) p{
transform:rotateX(30deg);
}
.rotate div:nth-of-type(3) p{
transform:rotateY(30deg);
}
.rotate div:nth-of-type(4) p{
transform:rotateZ(30deg);
}
</style>
</head>
<body>
<div class="translate">
<h1>transform:translate(가로이동거리px, 세로이동거리px)<br>
transform:translateX(가로이동거리px)<br>
transform:translateY(세로이동거리px)<br></h1>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
</div>
<div class="scale">
<h1>transform:scale(가로비율, 세로비율)-->1이 100%기준으로 0.5면 50%, 1.5이면 150%<br>
transform:scaleX(가로비율)<br>
transform:scaleY(세로비율)</h1>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
</div>
<div class="skew">
<h1>transform:skew(가로기준 기울기deg, 세로기준 기울기deg)
<br>transform:skewX(가로기준 기울기deg)
<br>transform:skewY(세로기준 기울기deg)
<br>transform:skewZ는 없음!!</h1>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
</div>
<div class="rotate">
<h1>transform:rotate(z기준으로 회전 deg)
<br>transform:rotateX(x축 기준 회전deg)
<br>transform:rotateY(y축 기준 회전deg)
<br>transform:rotateZ(z축 화면기준으로 회전 deg)</h1>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
<div>
<p>나는 텍스트다</p>
</div>
</div>
</body>
</html>
[ animation 속성의 활용 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02_animation속성의 활용</title>
<style>
*{margin: 0;
padding: 0;}
.rec{
width: 200px;
height: 200px;
background-color: yellow;
text-align: center;
line-height: 200px;
color: grey;
animation-name: stretch;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
animation-fill-mode: forwards;
}
@keyframes stretch{
from{width: 1000px;}
to{width: 600px;}
}
.cir{
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
color: white;
border-radius: 50%;
animation: ball 2s linear 1s infinite alternate-reverse forwards;
position: relative;
}
.cir:hover{
animation-play-state: paused;
}
@keyframes ball{
from{
top:100px;
left:600px;}
to{
top:600px;
left:200px;
transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="rec">사각형</div>
<div class="cir">원형</div>
<h1><mark>기본적으로 animation에 꼭 들어가야 하는 속성은</mark><br> animation-name,
animation-duration이다!!<br>
animation:이름 1s <br>
<mark>추가가 가능한 애니메이션 속성은</mark> <br>
1)animation-timing-function:linear, ease(기본값), ease-in, ease-out, ease-in-out,
cubic bezier(n,n,n,n)
<br>2)animation-delay:1s
<br>3)animation-iteration-count:횟수를 정수로 혹은, infinite(무한반복)
<br>4)animation-direction:reverse(반대로), alternate(왔다갔다), alternate-reverse
(반대에서 시작해서 왔다갔다)
<br>5)animation-fill-mode:forwards(to(100%))에서 끝나서 멈춤)
</h1>
<h2><mark>animation의 속성값은 이시속대(이시영도 속대):이름 시간 (속도 대기시간 무한반복 반대로(방향)
fill(feel));</mark></h2>
</body>
</html>
[ animation-timing-function ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03_animation-timing-function</title>
<style>
*{margin: 0;
padding: 0;}
nav{
border:1px solid gray;
width: 600px;
margin: 0 auto;
}
nav ul{
overflow: hidden;
}
nav li{
list-style: none;
width: 90px;
height: 100px;
background-color: pink;
float: left;
margin: 10px 5px;
text-align: center;
animation: long 5s 1s infinite forwards;
}
@keyframes long{
0%{height:0;}
100%{height:500px;}
}
nav li:nth-child(2){
animation-timing-function:ease-in
}
nav li:nth-child(3){
animation-timing-function:ease-out
}
nav li:nth-child(4){
animation-timing-function:linear
}
nav li:nth-child(5){
animation-timing-function:ease-in-out
}
nav li:nth-child(6){
animation-timing-function:cubic-bezier(1,0,.14,1)
}
nav li:nth-child(6):hover{
animation-play-state: paused;
}
</style>
</head>
<body>
<h1>http://cubic-bezier.com</h1>
<nav>
<ul>
<li>ease(default값)</li>
<li>ease-in(점점 빠르게)</li>
<li>ease-out(점점 느리게)</li>
<li>linear(등속도)</li>
<li>ease-in-out(점점 빠르다가 다시 점점 느리게</li>
<li>cubic-bezier</li>
</ul>
</nav>
</body>
</html>
반응형
'IT' 카테고리의 다른 글
| IT 5분 잡학사전 2주 챌린지 1일차. (0) | 2023.08.25 |
|---|---|
| animation fill mode 연습 (0) | 2022.07.09 |
| 웹폰트(TTF, OTF, WOFF, SVG, EOT) / transition (0) | 2022.07.06 |
| gnb 연습 / navigation bar (0) | 2022.07.05 |
| Sprite 속성 / Sprite animation 연습 (0) | 2022.07.02 |