안녕하세요.
이번에는 transform에 대하여 알아보겠습니다.
해당 글에서는 간단한 예시 코드만 보여드릴 예정이라 자세한 내용은 아래 링크를 통해서 접속하시면 자세한 내용을 확인하실 수 있습니다.
transform
- CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
- 해당 코드 외에도 다른 여러 가지 속성을 설정할 수 있습니다.
<!DOCTYPE html>
<html lang="en, ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transform</title>
<style>
img {
width: 200px;
height: 200px;
}
#img_skewx:hover {
transform: skewX(50deg);
}
#img_skewy:hover {
transform: skewY(50deg);
}
#img_skew:hover {
transform: skew(50deg, 50deg);
}
#img_rotatex:hover {
transform: rotateX(100deg);
}
#img_rotatey:hover {
transform: rotateY(100deg);
}
#img_rotate:hover {
transform: rotate(100deg);
}
#img_scalex:hover {
transform: scaleX(2);
}
#img_scaley:hover {
transform: scaleY(2);
}
#img_scale:hover {
transform: scale(2);
}
#img_scale23:hover {
transform: scale(2, 3);
}
</style>
</head>
<body>
<div>
<p>skew</p>
<img src="../res/etc/bada.png" id="img_skewx">
<img src="../res/etc/bada.png" id="img_skewy">
<img src="../res/etc/bada.png" id="img_skew">
</div>
<div>
<p>rotate</p>
<img src="../res/etc/bada.png" id="img_rotatex">
<img src="../res/etc/bada.png" id="img_rotatey">
<img src="../res/etc/bada.png" id="img_rotate">
</div>
<div>
<p>scale</p>
<img src="../res/etc/bada.png" id="img_scalex">
<img src="../res/etc/bada.png" id="img_scaley">
<img src="../res/etc/bada.png" id="img_scale">
<img src="../res/etc/bada.png" id="img_scale23">
</div>
</body>
</html>
2. transform 속성
- transform-origin: center;
- 해당 개체의 기준점을 변경 함
- transform: rotate(-90deg);
- 기준점을 기준으로 개체를 돌림 (각도기 느낌)
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
감사합니다.
반응형
'HTML5 & CSS3' 카테고리의 다른 글
| [Bootstrap] Bootstrap에 대하여 알아보기 (0) | 2023.01.21 |
|---|---|
| [CSS3] display에 대해서 알아보기 (0) | 2022.12.08 |
| [CSS3] z-index에 대해서 알아보기 (0) | 2022.12.04 |
| [CSS3] Position에 대해서 알아보기 (0) | 2022.12.03 |
| [CSS3] CSS 적용 우선 순위 (0) | 2022.12.02 |