html & css/개념
변형 (transform) 소개
Doo Hee
2023. 11. 28. 23:12
transform
- 요소의 크기 조절, 회전, 비틀기 등을 하는 것
- https://codepen.io/vineethtrv/pen/XKKEgM 통해 다양한 기능을 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: deepskyblue;
color: white;
display: inline-block;
padding: 20px;
font-size: 3rem;
margin: 100px;
transform: scaleX(2);
/* x축으로 2배 커지는 것 */
transform: scaleY(2);
/* 밑에있는게 위를 덮어버림 */
transform: scaleX(2) scaleY(2);
/* 한번에 써서 두개의 값을 모두 적용할 수 있다. */
transform: scale(0.5, 3);
/* 단축형과 나눠서 쓰는 형태가 존재한다. */
}
</style>
</head>
<body>
<h1>Hello transform!</h1>
</body>
</html>