transform

margin: 값을 auto로 주게 되면 페이지의 중앙으로 오게된다.

h1 {

    width: 300px;

    background-color: #2a9d8f;

    border: 5px solid #264653;

    color: #eae2b7;

    font-size: 1.8em;

    text-align: center;

    margin: 20px auto;

    font-family: 'Courier New', Courier, monospace;

    font-weight: lighter;

}

 

transfrom 값은 selector에 여러가지 변화를 주는데, rotate, scale, translate,skew 등이 있다. 

 

section:nth-of-type(1) h1:nth-of-type(1) {

    /** transform-origin: bottom right; */

    transform: rotate(45deg);

}

 

1번째 section의 1번째 h1에 45도의 회전을 준다. transfrom-orgin은 회전할때 한 지점을 핀을 고정하고 돈다.

 

section:nth-of-type(1) h1:nth-of-type(2) {

    transform: scale(0.6);

}

 

1번째 section의 2번째 h1에 크기를 0.6으로 줄인다.

section:nth-of-type(1) h1:nth-of-type(3) {

    transform: translatex(100px);

}

 

1번째 section의 3번째 h1에 x축으로 100px 이동한다. translatey도 가능하고 그냥 translate도 가능하다.

 

section:nth-of-type(2) h1:nth-of-type(4) {

    transform: rotate(180deg) translatex(500px) translateY(200px) scaleY(1.5)

}

 

위처럼 transfrom을 여러가지 적용도 가능하다. 

 

https://developer.mozilla.org/ko/docs/Web/CSS/transform