변형 (transform) 소개

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>

Frontend repository!