so woon!

[속성] transform 속성 본문

CSS/개념정리

[속성] transform 속성

xowoony 2022. 9. 10. 21:54

학습일 : 2022. 09. 07

transform 속성
요소의 형태나 위치를 변화시키기 위해 사용한다.
각 함수는 띄우기( )로 구분하여 여러개 사용한다. 절대 transform 속성을 여러개 사용하지 않는다.

 

함수
  - rotate(?deg) : (해당 2D 상의 요소를 고정축 기준으로) 회전한다. (deg : Degree, 도)
  - rotateX(?deg) : X축으로 회전한다.
  - rotateY(?deg) : Y축으로 회전한다.
  - rotateZ(?deg) : Z축으로 회전한다.
  - scale([0.0~|0%~]) : 해당 요소를 확대/축소한다. 기본 값은 1(100%)이다.
  - translate([X축 이동량 : ?px|?rem|?%|...], [Y축 이동량 : ?px|?rem|?%|...]) : 해당 요소를 X, Y축으로 이동시킨다.
                                        이 때 퍼센트(%)값은 부모와 관계 없이 본 요소의 크기에 대한 백분율이다.
  - translateX([?px|?rem|?%|...]) : 해당 요소를 X축으로 이동시킨다.
  - translateY([?px|?rem|?%|...]) : 해당 요소를 Y축으로 이동시킨다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>transform 속성</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            top: 50%;
            left: 50%;
            width: 20rem;
            height: 30rem;
            background-color: rgb(200, 100, 100);
            position: absolute;
            transform: translate(-50%, -50%);❤
        }
    </style>
</head>
<body>
    <div class="box"></div>❤
</body>
</html>

============실행결과=============

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[태그] link 태그  (0) 2022.09.15
[속성] transition 속성  (0) 2022.09.10
[속성] filter 속성  (0) 2022.09.10
[속성] z-index 속성  (0) 2022.09.10
[속성] overflow 속성  (0) 2022.09.10
'CSS/개념정리' Related Articles more
Comments