CSS3 변환 시작하기

저자：Eve Cole 업데이트 시간：2025-01-13 09:34:08

사람들은 화면에서 약간의 변화를 기대하지만 CSS 와 HTML은 페이지에서의 상호 작용을 위해 너무 적은 작업을 수행할 수 있으며 여전히 코드로 구현해야 합니다.

예를 들어, 링크는 이 색상이거나 저 색상이며, 그림은 투명하거나 불투명합니다. 사이에는 전환이 없습니다 .

이로 인해 요소가 엄격하게 전환되거나 변경되기 때문에 대부분의 웹 페이지가 다소 경직됩니다.

예, DHTML, jQuery를 사용하거나 자체 JS를 작성하여 이를 과도하게 수행할 수 있지만, 매우 간단한 기능을 구현하려면 더 많은 코드가 필요합니다.

우리에게 필요한 것은 페이지에 간단한 전환 효과를 추가하는 빠르고 쉬운 방법입니다. 이 글에서는 CSS 전환 과 이를 사용하는 방법에 대한 유용한 정보를 찾을 수 있습니다.

몇 달 전, 나는 디자이너들이 오랫동안 갈망해 왔던 몇 가지 기본 기능을 달성하기 위해 새로운 CSS 3 기술을 사용하기 시작해야 한다고 제안했습니다. 유일한 문제는 IE8을 포함하여 IE에서 이러한 기술을 사용할 수 없다는 것이었습니다.

일부 독자들이 이러한 기술이 75%의 사용자에게 보이지 않을 것이라고 믿는 견해는 신뢰할 수 없습니다.

그런 독자들에게 "조심하세요"라고 말하고 싶습니다. 단 몇 줄의 코드만으로 모든 요소에 멋진 변형 효과를 추가할 수 있는 또 다른 새로운 CSS 속성을 소개할 것이기 때문입니다.

CSS 변환은 CSS 3에 도입되었지만 웹킷 확장으로 추가되었습니다. 즉, 이제 Apple Safari 및 Google Chrome을 포함한 웹킷 기반 브라우저에서만 사용할 수 있습니다. 그러나 Opera 10.5 사전 알파 버전으로 판단하면 Opera는 다음 10.5에서 CSS 3 변환을 지원할 것입니다. 따라서 이 기사에서 언급된 실제 효과를 보려면 Chrome 또는 Safari 4를 사용하여 이 기사를 보는 것이 좋습니다 .

CSS 변환은 어디서 오는가?

변환은 Webkit의 일부였으며 다른 브라우저에서는 할 수 없었지만 Safari UI에서는 할 수 있는 멋진 기능의 기초였습니다.

그러나 W3C CSS 작업 그룹은 공식 기능에 변환을 추가하는 것을 거부했으며 일부 구성원은 변환이 CSS 속성이 아니며 스크립트를 통해 더 잘 처리될 것이라고 주장했습니다. (자신감이 넘칩니다. 이전 문단에서도 비슷한 관점이 있었고 가오가오와 논의했습니다. CSS 애니메이션은 성능의 범위를 벗어난다고 생각합니다. 인터랙티브한 것들은 스크립트로 구현해야 합니다. 하지만 나중에는 Gui 형제의 지도로 나는 새로운 이해로 시작했습니다 - Shen Fei)

그러나 나를 포함한 많은 디자이너와 개발자는 이것이 실제로 스타일, 즉 우리가 매일 사용하는 전통적인 정적 스타일이 아니라 동적 스타일이라고 주장합니다.

다행스럽게도 역동적인 스타일링 논쟁은 이제 과거의 일이 되었습니다. 지난 3월, Apple과 Mozilla의 대표자들은 CSS 3 기능에 CSS 변환 모듈을 추가하기 시작했습니다. 이는 Apple이 이미 WebKit에 추가한 것과 매우 유사합니다.

디자인 개선 사항에 대한 간략한 소개

계속하기 전에 다음 사항을 강조하겠습니다. 스타일이 브라우저 범용이 아닌 경우(즉, 일반적으로 사용되는 모든 브라우저에서 지원되는) 웹 사이트의 기능을 스타일에 종속시키지 마십시오.

이를 놓친 분들을 위해 다시 한 번 강조합니다. 스타일이 브라우저 전반에 걸쳐 보편적이지 않다면 웹사이트의 기능이 스타일에 의존하지 않도록 하십시오 .

이는 전환과 같은 스타일을 디자인 향상으로 사용하여 스타일을 볼 수 없는 사용자의 유용성을 희생하지 않고도 사용자 경험을 개선할 수 있음을 의미합니다. CSS 변환 없이 작동하고 사용자가 여전히 작업을 완료할 수 있다면 괜찮으며 CSS 변환을 사용할 수 있습니다.