HTML+CSS
html/css #14-transform, 애니메이션
채채루
2024. 1. 2. 23:21
가운데 정렬하는 방법 (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축(세로)를 기준으로 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;
}