6월21일25일차 - transform-origin, two fixed backgrounds
transform-origin을 활용하면 회전 축을 직접 지정할 수 있습니다.
background video를 적용하는 방법도 복습합니다.
[220621-tranform-origin 적용모습] [220621-tranform-origin예시-html]
[220621-fixed background를 활용하여 색상이 차오르는 연출을 합니다.]
한 배경은 grayscale()을 적용하고 다른 배경을 겹치도록 위치하여
스크롤을 내림에 따라 색상이 차오르는 연출이 가능합니다.
transform-origin 속성으로 rotate의 기준점을 정할 수 있습니다.
bottom의 center를 기준으로 -30deg 회전시킵니다.
.container figure img {
transform-origin: bottom center;
transform: rotate(0);
transition: transform 0.5s;
}
.container figure:hover img {
transform-origin: bottom center;
transform: rotate(-30deg);
}
animation을 적용하면 다양한 효과를 줄 수 있습니다.
.container figure img {
transform-origin: bottom center;
}
.container figure:hover img {
animation: lanez 0.5s;
transform-origin: bottom center;
}
@keyframes lanez {
0% {transform: rotate(0);}
50% {transform: rotate(-15deg);}
75% {transform: rotate(5deg);}
100% {transform: rotate(0);}
}
background에 video를 적용할 수 있습니다.