이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 트랜스폼
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 믹스 블렌드 모드 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
지난 포스트에 이어서 이번에도 계속해서 트랜스폼을 공부하겠습니다.
그런데 생활코딩의 이번 강의 영상에는 오류가 하나 있습니다. 그 오류를 해결하는 방법까지 알려드리겠습니다.
이 강의 영상의 6분 9초부터 보시면, 이동시킨 중심축에서부터 transform의 효과는 나타나지만, 중심축이 고정이 되어있지 않고 transform의 효과가 나타나는 과정에서 중심축이 이동하는 것 같은 모습을 보실 수 있습니다.
이 오류까지 해결해보겠습니다.
transform-origin
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
마우스 커서를 올려두면 서서히 변화가 일어나게 하는 transition 효과는 아래의 두 포스트에서도 다룬 적이 있습니다.
CSS 이미지나 폰트에 필터 적용하기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 배경 색과 이미지 이 포스팅은 PC로 작성되었습니다. 모바일로 보시
gogogameboy.tistory.com
CSS 블렌드 모드
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 이미지나 폰트에 필터 적용하기 이 포스팅은 PC로 작성되었습니다.
gogogameboy.tistory.com
이번의 생활코딩의 강의 영상처럼 마우스를 올렸을 때 transition: all 1s; 로 하면 중심축이 왔다 갔다 하는 문제가 생깁니다.
transition: transform 1s; 이라고 해주어야 합니다.
transform-origin: 으로 중심축의 이동이 가능합니다.
codepen.io/vineethtr/embed/XKKEgM/?height=643&theme-id=light&default-tab=result&embed-version=2
중심축의 이동의 예제는 위의 링크를 통해서 보실 수 있습니다.
Photo by Caspar Camille Rubin on Unsplash
다음 포스트
CSS 트랜지션
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 gogogameboy.tistory.com/108 오늘 공부할 내용은 트랜지션 transition입니다. 생
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 (0) | 2021.01.13 |
|---|---|
| CSS 트랜지션 (0) | 2021.01.12 |
| CSS 트랜스폼 (0) | 2021.01.11 |
| CSS 믹스 블렌드 모드 (0) | 2021.01.10 |
| CSS 블렌드 모드 (0) | 2021.01.10 |
댓글