.box {
margin: 20px auto;
width: 100px;
height: 100px;
background-color: blueviolet;
border: 1px solid burlywood;
transition-property: width, height;
transition-duration: 2s, 1s;
}
.box:hover {
width: 200px;
height: 150px;
}
이랬는데 요래됐슴당!
.box {
margin: 50px auto;
width: 100px;
height: 100px;
background-color: blueviolet;
border: 1px solid burlywood;
/* transition-property: width, heigh;
transition-duration: 2s, 1s; */
transition: 5s ease-out;
}
.box:hover {
width: 200px;
height: 150px;
background-color: antiquewhite;
/* 회전한다. */
transform: rotate(270deg);
}
애니메이션이라 직접 확인해봐야 할 듯~!
.box {
/* margin: 100px auto; */
width: 100px;
height: 100px;
background-color: blueviolet;
border: 1px solid burlywood;
/* transition-property: width, heigh;
transition-duration: 2s, 1s; */
transition: 5s ease-out;
}
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
transform: rotate(45deg);
}
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
transform: scale(1.5);
}
확대랑 축소된다!
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
transform: scale(0.5);
}
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
transform: scaleX(2);
}
직사각형 된다!!
203쪽 페이지 확인하면서 확인해보기!!!
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
transform: perspective(500px) rotateX(45deg);
}
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
transform: perspective(500px) rotateY(45deg);
}
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
/* transform: perspective(500px) rotateY(45deg); */
transform: skewY(45deg);
}
.box {
/* text-align: center; */
margin: 200px auto;
width: 500px;
height: 200px;
background-color: blueviolet;
border: 1px solid burlywood;
/* transition-property: width, heigh;
transition-duration: 2s, 1s; */
/* transition: 5s ease-out; */
}
.box:hover {
/* width: 600px; */
/* height: 200px; */
background-color: pink;
/* 회전한다. */
/* transform: rotate(-45deg); */
/* transform: perspective(500px) rotateY(45deg); */
/* transform: skewY(45deg); */
}
.box2 {
width: 250px;
height: 200px;
background-color: skyblue;
}
.box2:hover {
/* width: 600px; */
/* height: 200px; */
/* background-color: pink; */
/* 회전한다. */
/* transform: rotate(-45deg); */
/* transform: perspective(500px) rotateY(45deg); */
/* transform: skewY(45deg); */
transform: perspective(500px) rotateY(45deg);
}
.box {
/* text-align: center; */
margin: 200px auto;
width: 500px;
height: 200px;
background-color: blueviolet;
border: 1px solid burlywood;
/* transition-property: width, heigh;
transition-duration: 2s, 1s; */
/* transition: 5s ease-out; */
perspective: 500px;
}
.box2:hover {
/* width: 600px; */
/* height: 200px; */
/* background-color: pink; */
/* 회전한다. */
/* transform: rotate(-45deg); */
/* transform: perspective(500px) rotateY(45deg); */
/* transform: skewY(45deg); */
transform: rotateY(45deg);
}
.box2:hover {
/* width: 600px; */
/* height: 200px; */
/* background-color: pink; */
/* 회전한다. */
/* transform: rotate(-45deg); */
/* transform: perspective(500px) rotateY(45deg); */
/* transform: skewY(45deg); */
transform: rotateY(180deg);
backface-visibility: hidden;
}
'프론트엔드 > HTML' 카테고리의 다른 글
| CSS 띄움을 이용한 실습 (0) | 2023.10.25 |
|---|---|
| CSS 띄움을 이용한 레이아웃 + CSS clear의 활용 (0) | 2023.10.25 |
| doors 홈페이지 만들기 (0) | 2023.10.18 |
| 실습 홈페이지도 만들어보기 (0) | 2023.10.18 |
| 박스 순서도 (0) | 2023.10.18 |