728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<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>
img{
margin-left:200px;
width: 200px;
height: 200px;
}
.translate:hover{
transform:translate(200px, 200px);
}
.transx:active{
transform:translateX(500px);
}
.transy:active{
transform: translateY(500px);
}
.transz:active{
transform: perspective(300px) translateZ(100px);
}
.scale:hover{
transform:scale(1.5);
}
.scalex:hover{
transform: scaleX(1.5);
}
.scaley:hover{
transform: scaleY(1.5);
}
.skew:hover{
transform:skew(80deg)
}
.transitiondiv{
width: 100px;
height: 100px;
border: 1px solid red;
transition-property: all;
transition-duration: 4s;
}
input:checked~.transition{
transform: translateX(400px);
}
.transition:active{
background-color: lime;
transform:translateX(2000px);
}
</style>
</head>
<body>
<h1>트랜지션 관련 스타일</h1>
<h2>변형</h2>
<p>
태그가 특정 동작(마우스클릭, 마우스 호버)에 의해 변형(이동, 확대, 찌그러지거나)되는것
</p>
<br>
<br>
<hr>
<h3>태그 이동시키기</h3>
<p>
translate함수를 이용하면 설정된 태그가 특정위치로 이동하게됨
</p>
<img class="translate" src="resources/images/bono.jpg" width="200" height="200"/>
<br>
<img class="transx" src="resources/images/bono.jpg" width="200" height="200"/>
<br>
<img class="transy" src="resources/images/bono.jpg" width="200" height="200"/>
<br>
<img class="transz" src="resources/images/bono.jpg" width="200" height="200"/>
<br>
<hr>
<br>
<h3>태그 확대하기</h3>
<img class="scale" src="resources/images/coffee.png">
<img class="scalex" src="resources/images/dog1.gif">
<img class="scaley" src="resources/images/flower.jpg">
<br><br><hr>
<h3>skew적용하기</h3>
<img class="skew" src="resources/images/peng.jpg">
<br><br><hr>
<h3>트랜지션 적용하기</h3>
<p>
태그가변형속성에 의해 변형이 될때부드럽게 변형이될수있게 해주는 속성
transition-property : 적용할 속성
transition-duration : 지속시간
transition-timing-function: liner, ease , ease-in ....
transition : 한번에 모든속성을지정할때 사용
</p>
<br>
<br>
<hr>
<input type="checkbox">
<div class="transitiondiv transition transi"></div>
<div class="transitiondiv transition transi" style="transition-timing-function: linear;"></div>
<div class="transitiondiv transition transi" style="transition-timing-function: ease;"></div>
<div class="transitiondiv transition transi" style="transition-timing-function: ease-in;"></div>
<br<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>><br><br><br><br>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 화면구조잡기 HTML (0) | 2023.05.17 |
|---|---|
| 애니메이션관련 HTML (0) | 2023.05.17 |
| 레이아웃관련스타일2 HTML (1) | 2023.05.14 |
| 레이아웃스타일 HTML (1) | 2023.05.14 |
| 배경관련스타일 HTML (0) | 2023.05.13 |
