이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 믹스 블렌드 모드
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 블렌드 모드 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
지난 포스트에 이어 이번에 공부할 내용은 Transform입니다.
언제나 그랬듯이 이번에도 아래의 생활코딩 강의 영상을 보면서 공부해봅시다.
transform
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
저는 여러가지의 transform 효과 중에서 rotate를 사용했습니다.
transform 효과를 2개 이상 주고 싶다면, transform: scaleX(0.5) scaleY(0.5); 와 같이 ;로 따로 구분짓지 말고 스페이스로 띄어주시면 됩니다.
X축과 Y축의 스케일을 변형시키는 transform 효과는 transform: scale(0.5,0.5); 와 같이 축약시킬 수도 있습니다.
codepen.io/vineethtr/embed/XKKEgM/?height=643&theme-id=light&default-tab=result&embed-version=2
그 외 여러 가지 transform 효과는 위의 링크를 통해서 보실 수 있습니다.
Hello Transform!
위의 소스 코드로 이런 결과가 나왔습니다.
잘 활용하면 꽤 감각적인 웹페이지를 꾸밀 수 있을 것 같습니다.
다음 포스트
CSS 트랜스폼 중심축 바꾸기
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜스폼 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 트랜지션 (0) | 2021.01.12 |
|---|---|
| CSS 트랜스폼 중심축 바꾸기 (0) | 2021.01.12 |
| CSS 믹스 블렌드 모드 (0) | 2021.01.10 |
| CSS 블렌드 모드 (0) | 2021.01.10 |
| CSS 이미지나 폰트에 필터 적용하기 (0) | 2021.01.09 |
댓글