[CSS] Transform 과 Animation을 결합할 때 주의사항

Tranform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } prefix 작성 시 유의 사항 .box { animation: rotation 3s linear 1s 6 alternate; } @-webkit-keyframes rotation { from {-webkit- transform: rotate(-10deg); } to {-webkit- transform: rotate(10deg); } } animation 앞에 prefix가 달려있다면 (ex..

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[HTML/CSS] 웹사이트를 재미있게 만드는 CSS3의 transform 속성들

Transform rotate(45deg); 입력한 각도만큼 회전 음수도 입력 가능 scale(2, 3); 숫자는 비율을 의미 width를 2배, height를 3배 확대 skew(10deg, 20deg); x축 y축을 기준으로 입력한 각도만큼 비틂 translate(100px, 200px); 선택한 오브젝트의 좌표 변경 prefix 접두사 다른 버전의 브라우저에서의 실행을 원할 경우

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms