transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
img {
border: 5px solid black;
border-radius: 50%;
transform: rotateY(50deg) rotateX(20deg) rotateZ(30deg);
}
</style>
</head>
<body>
<img src="img/fa-50.jpg" />
</body>
</html>
transform: rotateXYZ(앵글)을 주면 이미지를 원하는 축 만큼 돌려줍니다. 크기를 늘이거나 줄일 수 도 있습니다. "scaleX(몇배)" 처럼 쓴다면 x축을 "몇" 배 증가시킵니다.
translateXYZ(픽셀값)을 주면 원하는 방향으로 이미지를 이리저리 움직일 수도 있습니다. 하지만 sibling 관계는 움직이지 않습니다. 가령 예를들면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
img {
border: 5px solid black;
border-radius: 50%;
transform: translateX(100px);
}
</style>
</head>
<body>
<img src="img/fa-50.jpg" />
<span>hahahahaha</span>
</body>
</html>
라 합시다. 바디에 스팬으로 hahahaha라는 텍스트가 써져있습니다. 그런데 옆에 이미지가 100px x축으로 오른쪽으로 움직였다고 해서 hahahah는 움직이지 않는다는 뜻입니다. transformation은 box element를 변형시키지 않습니다. margin, padding 이 적용되지 않습니다. 일종의 3D transformation이기 때문입니다. 픽셀차원에서 일어나는 일이고 box차원에서 일어나지 않아서 span은 이미지가 원래 그자리에 있다고 생각하게 됩니다.
transition + transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>seongmin times</title>
<style>
img {
border: 5px solid black;
border-radius: 50%;
transition: transform 1s ease-in-out;
}
img:hover {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<img src="img/fa-50.jpg" />
</body>
</html>
이미지 위에 호버할때 transition을 주어서 천천히 바뀌도록 해봤습니다. transition을 줄때는 root에게 주어야 합니다. 잊지 마세요. 즉 img:hover 에게 주는 것이 아니라 img에게 주어야 합니다. 만약 img:hover에 준다면 마우스를 뗄때 transition없이 이미지가 흭 바뀌어 버려서 볼때 매우 안이쁩니다.
여러가지 방법으로 transition을 사용해봅시다.
(cf. transform 에 새로운 attribute를 줄때는 쉼표가 필요하지 않습니다. 하지만 transition의 attribute를 더 쓰고싶다면 쉼표를 찍어야 합니다.)
img {
border: 5px solid black;
border-radius: 50%;
transition: transform 0.25s ease-in-out;
}
img:hover {
transform: rotateZ(360deg) scale(0.5);
}
참고 사이트 입니다.
https://developer.mozilla.org/ko/docs/Web/CSS/transform
'HTML-CSS > CSS' 카테고리의 다른 글
| CSS Border Box (0) | 2021.03.21 |
|---|---|
| CSS Media Queries (0) | 2021.03.21 |
| CSS Animation (0) | 2021.03.21 |
| CSS transition (0) | 2021.03.21 |
