728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
width: 600px;
height: 20px auto;
}
.origin {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin: 50px;
}
.origin > div{
width: 100px;
height: 100px;
background-color: darkcyan;
transition-duration: 1.5s;
}
#scalex{
/* 가로로 2배 확대 */
transform: scalex(2);
}
#scaley{
/*세로로 1.5배 */
border-style: solid;
border-width: 10px;
border-color: black red blue green;
transform: scaley(1.5);
transition-duration: 1000ms; /* transition이 실행되는 총 시간*/
transition-delay: 0.5s;/* transition이 실행될떄까지 걸리는 시간*/
/* transition-property: ; */
}
#scale{
/* 가로 세로 0.5배 */
transform: scale(0.5);
border: 3px solid black;
}
#scalex:hover{
transform: rotate(45deg);
}
#scaley:hover{
border-radius: 50%;
background-color: aquamarine;
transform: rotate(-45deg);
}
#scale:hover{
/* x, y, z 축으로 deg 만큼 회전 */
transform: rotate3d(2.5, 1.2, -1.5, 55deg)
}
</style>
</head>
<body>
<div id="container">
<div class="origin">
<div id="scalex"></div>
</div>
</div>
<div id="container">
<div class="origin">
<div id="scaley"></div>
</div>
</div>
<div id="container">
<div class="origin">
<div id="scale"></div>
</div>
</div>
</body>
</html>728x90
반응형
'코딩일지 > WEB' 카테고리의 다른 글
| transition 연습 (0) | 2022.12.29 |
|---|---|
| transform3 (0) | 2022.12.29 |
| teansform기본 (2) | 2022.12.29 |
| 가상선택자3 (0) | 2022.12.29 |
| 가상선택자2 (0) | 2022.12.29 |