안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
HTML 코드
<body>
<h1>transform</h1>
<div class="img-wrapper">
<img src="../../sample/image/flower1.PNG" alt="" class="translate">
</div>
<div class="img-wrapper">
<img src="../../sample/image/flower2.PNG" alt="" class="scale">
</div>
<div class="img-wrapper">
<img src="../../sample/image/flower3.PNG" alt="" class="rotate">
</div>
</body>
CSS 코드
<style>
body {
text-align: center;
}
.img-wrapper {
margin: 100px 0;
}
img {
width: 300px;
}
</style>
transform: translate()
- x축 offset, y축 offset 지정
.translate:hover {
transform: translate(100px, 100px); /* x축 offset, y축 offset */
}
x축을 기준으로 100px, y축을 기준으로 100px의 offset이 적용된 것을 확인할 수 있습니다.
transform: scale()
- x축 비율, y축 비율 확대
.scale:hover {
transform: scale(1.5, 1.5); /* x축 비율, y축 비율 확대 */
}
transform: rotate()
- 양수 시계방향 회전, 음수 반시계방향 회전
.rotate:hover {
transform: rotate(45deg); /* 양수 시계방향, 음수 반시계방향 */
}
양수로 주었기 때문에 시계방향으로 45도 회전된 것을 확인할 수 있습니다.
'deg'를 사용!!
부드럽게 transform이 작동되는 것 같아 보이진 않습니다.
