CSS 속성 - 변환 효과

2D 변환 함수

1, translate(x, y) 이동 x축 y축

2, translateX(x) 이동 x축

3, translateY(y) 이동y축

4, scale(x, y) 크기(x, y)축

5, rotate(degree) 회전(각도)

등이 있다

다 사용하면서 봐보도록 하자!

고정 Html코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./transform.css">
</head>
<body>
    <div class="container">
        <div class="item">AB</div>
    </div>
</body>
</html>

translate 사용

CSS

body{
    padding: 100px;
}

.container{
    width: 100px;
    height: 100px;
    background-color: royalblue;
}

.container .item{
    width: 100px;
    height: 100px;
    background-color: orange;
    transform: translate(40px, 40px);
}

위의 코드처럼 자식 요소에 translate를 x축으로40px, y축으로 40px을 주었다