html/css #14-transform, 애니메이션

가운데 정렬하는 방법 (position + absolute 사용) 
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50%) 

   position: absolute;

    left : 50%;

    top : 50%;

    /*position은 컨테이너 블록 기준의 너비, 높이 퍼센테이지이다.

    꼭짓점이 해당 위치에온다. */

    transform: translate(-50%, -50%);

    /*자기자신의 너비, 높이 기준의 퍼센테이지이다.

    우리 눈으로 안맞는 부분을 맞춰주기 위해서 쓴다. */

 

 

transform: translate( x, y)

이 상황에서 머리를 아래로 이동하려고 하면

transform: translateY(60%);

 

= 내 자신의 높이를 기준으로 60% 만큼 이동됨 = 아래로 내려감

위와 같이 값을 주면 아래로 간다. (내 자신을 기준으로 이동한다.)

 

 

 

transform: rotate

 

좌우대칭을 맞추기 위해서 두번째 뿔을 Y 축 기준 50도 돌린 모습이다

 

Y축(세로)를 기준으로 180도 돌리고 싶을 때 = 좌우반전

    transform: rotateY(180deg);

 

반대방향으로 돌리고 싶다면 음수 degree를 주면 된다!!! 

 

 

 

줄무늬 만들기 background-image: linear-gradient

    background-image: linear-gradient(

        90deg, /*그라디언트 각도*/

        var(--color-green) 50%,

        rgb( 0 0 0 /.4) 50%,

        var(--color-green) 50%,

        rgb( 0 0 0 /.4) 50%

    );

    background-size: 10px 10px; /*줄무늬 크기*/

    border-radius : 0 0 0 20px;

 

 

 

애니메이션 keyframes 선언 

/*CSS keyframes*/

@keyframes fly{

    0% {

        transform: rotate(0);

    }

    100% {

        transform: rotate(180deg);

    }

}

 ※animation이 들어가면 원래 가지고 있던 transform : translate가 씹힌다. 때문에

keyframes를 작성할 때 우선적으로 해당 부분을 넣어줘야 한다. 

 

@keyframes jump {

    0% {

        transform: translate(-50%, -50%) translateY(0);

    }

    100% {

        transform: translate(-50%, -50%) translateY(-300%);

    }

}

이와 같이 우선적으로 transform:translate 를 넣어준다. 

 

 

<애니메이션 사용 >animation-mame : 사용할 애니메이션 이름
animation-duration: 애니메이션 지속 시간 설정
-4s, 1s, .4s ...
animation-iteration-count: 애니메이션 주기
-infinite(끝없이)
animation-timing-function: 
-linear, ease-in, ease-out ... 

 

.monster-head {

    background-color: var(--color-primary-light);

    width: 100px;

    height: 100px;

    border-radius: 50px 50px 20px 20px;

    margin: 0 auto;

    transform: translateY(40%);

    animation-name: neck;

    animation-duration: 1s;

    animation-iteration-count: infinite;

}