Transform
📌 Transform
: 변형.
📌 종류
rotate : 회전
scale : 크기
translate : 이동
💡 다른 형제 요소는 변화시키지 않으며, margin과 padding이 적용되지 않는다.
https://developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
developer.mozilla.org
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
html {
background-color: blanchedalmond;
}
img {
border: 5px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<img src="img/dolphin1.jpg"/>
</body>
</html>+ 추가 설명
더보기
마우스를 그림 위에 올리면, 그림이 회전한다.
* border-radius: 50%; 로 설정을 하면 원이 그려진다.
'CSS' 카테고리의 다른 글
| [CSS] Media Query (0) | 2022.09.19 |
|---|---|
| [CSS] Animation (0) | 2022.09.19 |
| [CSS] Transition (0) | 2022.09.19 |
| [CSS] custom property (0) | 2022.09.15 |
| [CSS] Pseudo Element (0) | 2022.09.15 |
댓글