반응형
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
img {
border: 10px solid black;
border-radius: 50%;
}
img:hover {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<img src="img/pic.jpg" />
</body>
</html>
결과
마우스 hover하면 90도로 회전한다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
img {
border: 10px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<img src="img/pic.jpg" />
</body>
</html>
참고) transition은 state가 아닌 루트(root) 영역에 적어야 한다
--> 여기서 state 는 hover 가 있는 영역임
결과
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
img {
border: 10px solid black;
border-radius: 50%;
transition: transform 5s ease-in-out;
}
img:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<img src="img/pic.jpg" />
</body>
</html>
rotateZ 대신 X를 넣어줌 ㅋㅋ
결과
반응형
'2. CSS' 카테고리의 다른 글
| CSS Animations (애니메이션) 사용하기 (0) | 2024.12.09 |
|---|---|
| CSS transform 종류 예시 (1) | 2024.12.09 |
| CSS transformation: 박스 element를 변형시키지 않는다. (0) | 2024.12.09 |
| CSS Transform 3D 회전 (rotateY, rotateX) (1) | 2024.12.09 |
| CSS Transition(트렌지션) 종류 (0) | 2024.12.03 |