목록CSS 트랜지션 (1)

게으른 나에게

[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "CSS-셋째마당: 11.트랜지션과 애니메이션"

11-1 변형 알아보기transform과 변형함수css에서 변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 함.transform: 함수웹 요소를 이동시키는 변형함수: translate()웹 요소를 x축으로 50 px, y축으로 100px 이동하는 클랙스 선택자 .photo를 정의..photo { transform: translate(50px, 100px) 2차원 변형: 웹 요소를 평면에서 변형. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커짐.3차원 변형: x축과 y축 원근감을 주는 z축을 추가해서 변형. z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고 뒤로 갈수록 값이 작아짐.2차원 변형함수종류설명translate(tx, ty)지정한..
My Study/서적 공부 2024. 7. 27. 23:51
이전 Prev 1 Next 다음