CSS를 사용하면 현실 세계에서 변형됩니다

CSS 변환 : 설계 어려움을 해결하는 강력한 도구

이 기사는 실제 응용 프로그램에서 CSS 변환의 힘을 탐구하고 다양한 설계 문제를 효과적으로 해결하고 매력적인 시각 효과를 만들 수있는 방법을 보여줍니다. 우리는 요소를 수직으로 정렬하고, 아름다운 화살표를 만들고,로드 애니메이션을 구축하고, 플립 애니메이션을 구현하는 방법을 배웁니다. CSS3 변환은 2012 년에 표준이되었으며, 그 전에는 일부 브라우저가 지원을 제공했습니다. 변형을 통해 회전, 스케일링 또는 기울기 요소와 같은 웹 요소를 쉽게 변환하여 이전에 달성하기 어려운 코드 한 줄만 달성 할 수 있습니다. CSS 변환은 2D 및 3D 변환을 지원합니다.
브라우저 호환성 측면에서 모든 주류 브라우저는 Internet Explorer 9 이상을 포함한 2D 변환을 지원합니다. 3D 변환은 IE10 이상에서만 부분적으로 지원됩니다.

이 기사는 전환의 기본 사항을 설명하지 않습니다. 전환에 익숙하지 않은 경우 먼저 2D 및 3D 변환 소개를 읽는 것이 좋습니다.

아동 요소의 수직 정렬

요소의 수직 정렬은 항상 웹 디자이너에게 문제가되었습니다. 간단 해 보이지만 실제로는 많은 성가신 기술이 있습니다. 일부 방법은 및

를 사용하는 것이 좋습니다. 다른 방법은 및 관련 스타일을 사용하는 것이 좋습니다. 물론 Flexbox 또는 Grid는이 문제를 해결할 수 있지만 더 작은 구성 요소의 경우 변환이 더 간단한 옵션 일 수 있습니다.

요소가 매우 가변적 인 경우 수직 정렬이 더 복잡 할 수 있습니다. CSS 변환은이 문제를 해결하는 효과적인 방법을 제공합니다. 다음은 두 개의 중첩 된 divs가있는 간단한 예입니다.

우리는 부모 요소의 너비, 높이 및 테두리를 설정하고 더 아름답게 만들기 위해 간격을 추가합니다. 그런 다음 를 사용하여 텍스트를 수직으로 중앙으로 중앙으로 사용하십시오. 흐름을 피하기 위해

: 를 추가 할 수 있습니다

이런 식으로 텍스트 길이가 다르더라도 자식 요소는 완벽하게 수직으로 중앙에있을 수 있습니다. 화살표를 만듭니다

또 다른 흥미로운 사용 사례는 확장 가능한 대화 화살표를 만드는 것입니다. 그래픽 편집기를 사용하여 화살표를 만들 수 있지만 번거롭고 비트 맵 이미지는 잘 확정되지 않을 수 있습니다.

순수한 CSS 솔루션이 더 효과적입니다. 텍스트 상자가 있다고 가정합니다 display: inline pseudo element로 화살표를 만들고 회전 변환을 사용하여 화살표 모양으로 변환하십시오. vertical-align: middle 이 방법으로, 페이지 글꼴 크기가 변경 되더라도 화살표는 비율을 유지할 수 있습니다. display: table "점프 볼"로딩 애니메이션

를 만듭니다 로딩 프로세스를 나타내려면 CSS 애니메이션 및 변환을 사용하여 점프 볼 로딩 애니메이션을 만들 수 있습니다.

<code class="language-html"><div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div></code>

<code class="language-css">.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}</code>

svg 를 사용하여 "로테이터"로딩 애니메이션을 만듭니다 (이 부분은 원본 텍스트와 유사합니다. 복제를 피하기 위해 자세한 코드는 여기서 생략되며 개요 만 유지됩니다) . SVG는 스피너와 같은보다 복잡한로드 애니메이션을 만드는 데 사용될 수 있습니다. SVG 요소, CSS 애니메이션 및 변환을 결합하면 시각적으로 매력적인 로딩 효과를 만들 수 있습니다.

플립 애니메이션 생성

마지막으로, 플립 애니메이션이있는 이미지의 예를 살펴 보겠습니다. 마우스를 그림 위로 가져 가면 뒤집히고 설명이 표시됩니다. 이것은 Instagram과 같은 사이트에 매우 유용합니다. (콘텐츠 의이 부분은 원본 텍스트와 유사합니다. 복제를 피하기 위해 자세한 코드는 여기에서 생략되며 개요 만 유지됩니다)

. 3D 변환 및 및 특성을 사용하여 부드러운 플립 애니메이션 효과를 달성 할 수 있습니다.

예방 조치

CSS 변환 및 애니메이션은 강력하지만 사용자 경험이 열악한 과도한 사용을 피하기 위해주의해서 사용해야합니다.

요약 transform-style: preserve-3d; transition 이 기사는 CSS 변환이 어떻게 다른 기술과 결합되어 다양한 설계 작업을 해결하는 방법을 보여줍니다. 우리는 요소를 수직으로 정렬하고, 확장 가능한 화살표를 만들고,로드 애니메이션을 점프하고 회전하며, 플립 애니메이션을 구현하는 방법을 배웠습니다. CSS는 쇼를하는 것이 아니라 사용자 경험을 향상시키는 데 사용해야합니다.

(원본 텍스트에서 CSS 변환에 대한 자주 묻는 질문의 내용은이 기사의 내용과 매우 일치하므로 여기에서 생략됩니다.

위 내용은 CSS를 사용하면 현실 세계에서 변형됩니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!