고급
-
Transformation, 트랜스포메이션이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 3. 02:30
이번시간에는 HTML문서의 element들을 변형시키는 효과, 트랜스포메이션, Transformation을 공부해 보겠습니다. 먼저 박스를 만들고, CSS에서 transform: rotate(20deg)를 작성해 보겠습니다. 브라우저에서 확인하기 전에, 박스가 잘 보이도록 폭 500px, 높이 500px, 배경색은 빨간색으로 설정하겠습니다. 그럼 박스가 20도 회전한 것을 확인할 수 있습니다. rotate, 회전뿐만 아니라, 아래와 같이 다양한 트랜스포메이션, Transformation을 시도해 볼 수 있습니다. 예를 들어, transform: skew(30deg, 20deg); 복사-붙여넣기하여 확인해 볼 수 있습니다 이러한 트랜스포메이션, Transformation은 트랜지션, transition과 ..