지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Transformations
을 활용하여
이미지의 크기 및
축을 중심으로 회전시키는
방법에 대해
알려드렸습니다.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 ( Transformations에 대해서 ) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 Transitions의 ease-in-function을 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주세요
tm-csc.tistory.com
이번 글에서도 이어서
Transformations에 대해
알려드리겠습니다.
그럼 예를 들어
설명드리기 위해
VSC를 실행해주세요.
그리고 지난번
transition글에서
보여드렸던 Hover를
하게 되면 어떻게 변하게
변할지 Transformaion도
설정 가능합니다.
img:hover {
transform: rotateZ(90 deg);
}
이미지 위에 마우스를
올려놓을 경우
Z 축을 기준으로 90도만큼
회전시켜
이렇게 설정하고 실행하면
이렇게 마우스를 올리면
90도로 회전하는 이미지를
볼 수 있습니다.
하지만 저번에도 말했듯이
갑작스럽게 변하는 이미지는
자연스럽지 않아 어색하기만
할 뿐인데요.
그렇다면 어떻게 하면 좋을까요?
바로 이렇게
transiton을 활용하면
부드럽게 되겠죠.
transition: transform 5s ease-in-out;
트랜스폼을 5초 동안
초반에 느리다가
중반에 빨라지고
후반에 느려지는 속도로
변형시켜줘
이렇게 적고 크롬으로 확인하면
5초 동안 자연스럽게 회전하고
다시 마우스를 떼면
원래 자리로 5초 동안
돌아가는 이미지를 얻을 수 있죠.
그리고 이렇게
transition: transform 1s ease-in-out;
트랜스폼을 1초 동안
변화시켜
img:hover {
transform: rotateY(180 deg);
마우스를 올려놓으면
Y축으로 180도 회전시켜
설정하게 되면
이렇게 자연스럽지만
빠르게 변화하는 이미지도
얻을 수 있습니다.
심지어
img:hover {
transform: rotateY(360 deg) scale(0.5);
}
Y축으로 360도 회전시키면서
크기를 반으로 줄여
라고 설정하게 되면
이렇게 더욱 멋있다고
느껴질 정도로 홈페이지나
어플을 꾸밀 수 있습니다.
이게 바로 transfomation과
transition의 힘이기도 하고요.
이외에 다양한
transformation이 있는 만큼
직접 찾아보고 적어보면서
자신의 것으로 만들 수 있을 거라
생각합니다.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
