728x90
transform/ transition 속성
.container {
height: 100px;
border: 4px solid black;
}
.container .item{
width: 100px;
height: 100px;
background-color: rgb(247, 218, 165);
transition: 1s;
/* 1초 동안 변형되면서 애니메이션처럼 자연스럽게 변환 */
}
.container .item:hover{
/* 커서를 가져다 놓으면 */
transform: rotate(45deg);
/* 45도로 변환 */
background-color: orange;
border-radius: 50%;
}
'일단 해보는 코딩 > CSS' 카테고리의 다른 글
[CSS] display - justify-content, align-items 속성알아보기 (0) | 2023.04.27 |
---|---|
[CSS] 플렉서블 박스(Flexable Box) (0) | 2022.06.24 |
[HTML/CSS] 반응형 웹 폰트/기술 (0) | 2022.06.24 |
[HTML/CSS] 반응형 웹/디자인 , 뷰 포트(View Port), 그리드 (0) | 2022.06.23 |
[CSS] 레이아웃 배치 설정 (float, clear 설정) (0) | 2022.06.21 |