07 - 태그 모양을 변화시켜보자. transform 속성

transform 속성에 대해 알아봅시다!

먼저 html 부터 작성하고 가겠습니다!

 <div class="test">

        <div class="center">

            <div class="box1">모양변화 회전</div>

            <h3 class="box2">모양변화 확대, 축소</h3>

            <p class="box3">모양변화 위치이동</p>

            <h2 class="box4">모양변화 기울기</h2>

        </div>

    </div>

저는 화면구상이 보기 편하게 css를 먼저 설정하고 가겠습니다

 .test { display:flex; justify-content:center; }

 .center { width:500px; }

.box1 { width:200px; height:200px; background-color:pink; color:#fff;}

가운데로 정렬된 예쁜 핑크컬러의 박스가 만들어졌습니다!

 

오늘 알아볼 transform의 여러 속성들을 알아봅시다

-  transform 속성

 

1) rotate(단위는 deg) : 태그를 회전 할 때 사용합니다

2) scale(단위는 숫자값 ex) 1 ) : 곱하기(배율)의 형태로 박스를 확대, 축소할때 사용합니다.

    scaley(세로방향) scalex(가로방향) scale(가로,세로 둘 다 적용)

3) skew(단위는 deg) : 태그의 기울기를 변경할 때 사용합니다.

4) translate(단위는 px) : 태그의 위치를 이동할 때 사용합니다.  가로.세로 위치순으로 적용됩니다

    translatey(세로 위치만) translatex(가로 위치만) translate (두 방향 위치 모두적용)

 

그럼 위 속성들을 적용 한 css를 한번 살펴볼까요?

저는 css를 이렇게  설정하고 가겠습니다 :)

 

 .box1 { width:200px; height:200px; background-color:pink; color:#fff;

                transform:rotate(50deg); transition:all 0.5s;}

 

 

.box2 { width:200px; height:200px; background-color:palevioletred; color:#fff;

                transform:scale(0.8); transition:all 0.5s; }

 

.box3 { width:200px; height:200px; background-color:plum; color:#fff;

                transform:skew(0deg)}

 

.box4 { width:200px; height:200px; background-color:powderblue; color:#fff;

                transform:translate(0px,0px);}

이제 화면을 확인해볼까요?

짜잔 css가 바뀐걸  확인하실수있습니다.

 

 

여기까지 간단한 transform 속성에 대해 알아보았습니다 ! :)