CSS3 변환 속성에 대한 자세한 설명 및 변환 사용법 요약-CSS 튜토리얼-php.cn

CSS3 변환 속성에 대한 자세한 설명 및 변환 사용법 요약

伊谢尔伦

풀어 주다： 2017-06-07 11:27:43

원래의

3810명이 탐색했습니다.

HTML5와 CSS3는 최근 최신 기술을 사용하는 크고 멋진 웹사이트가 많이 있습니다. CSS3에는 강력한 속성 Transform이 있습니다. 이 기능을 사용하면 다양한 특수 효과를 쉽게 얻을 수 있습니다. 가사를 인용하자면 "회전하고 점프하고 멈추지 않을 것이다." 문자 그대로의 의미에서 Transform은 변환을 의미하며 그 값에는 주로 회전, 기울이기, 크기 조정, 변환 및 행렬 변환 행렬이 포함됩니다. 다음 내용은 CSS3의 이 중요한 속성에 대해 설명합니다.

먼저 PHP 중국어 웹사이트와 관련된 무료 강좌를 배울 수 있습니다

1. Watch"CSS3 3D Special Effects Video Tutorial"Transform attribute

2. Learn"CSS3 " CSS3 변환 변환tutorial

transform attribute

CSS3 요소 2D 평면 변환 속성 구현 방법에 대하여 변환

CS S3의 모양 변환 요소를 사용할 수 있게 해줍니다 스트레칭, 스케일링 등 이번 글에서는 변환이 가능한 2D 평면 변환 속성인 변환에 대해 주로 다루었습니다. 변환은 변환을 의미하며 주로 함수를 통해 사용되는 함수는 다음과 같습니다. 변환 scale( ) 스케일 변환 왜곡() 경사 변환 행렬() 행렬 변환 변환-원점 규칙은 변환의 중심 변환 변환을 정의합니다

가변 너비, 높이로 div를 구현하기 위한 CSS3의 변환 속성에 대한 자세한 소개. 수직 및 수평 센터링

transform 호환성은 매우 낙관적입니다. IE9 이하에서는 호환되지 않습니다. IE9는 대체 -ms-transform 속성을 지원하지만 2D 변환만 지원합니다.

Google 및 Safari는 대체 -webkit-transform 속성을 지원합니다. IE9 이상, Firefox, Open이 호환됩니다.

실제 프로젝트에서 p의 가변 너비와 높이, 수직 및 수평 중심 맞춤 문제에 분명히 직면하게 될 것이라고 믿습니다. 예전에 js를 사용해서 구현했던 기억이 나네요.

사실 CSS를 사용하여 이를 달성하는 방법에는 여러 가지가 있습니다. 하지만 개인적으로 변환을 사용하는 것이 더 간단하고 편리하다고 생각하지만, IE9 이하의 브라우저에서는 호환되지 않습니다.

CSS3의 변환, 전환 및 애니메이션 속성의 차이점에 대한 자세한 예

일부 테스트 사례에서는 변환 속성이 시연될 때마다 애니메이션이 적용되는 것 같습니다. 이는 직관적 사고를 가진 소수의 사람들이 변형 속성을 애니메이션 속성으로 생각하게 만듭니다. 반대로 변환 속성은 정적 속성입니다. 일단 스타일에 작성되면 해당 효과는 변경 프로세스 없이 직접 표시됩니다. 변형의 주된 목적은 디자이너에게 낯설지 않은 요소의 특별한 변형을 만드는 것입니다. 쉽게 말하면 CSS 그래픽 변형 도구입니다.

css 변환 변형 속성 상세 소개

transform:Transformation

rotation:rotation():degree

skew:skew():degree

skewX

skewY　

scaling: scale():양수 숫자, 음수, 소수

scale 2) 회전(50deg); 먼저 회전을 수행한 다음 크기 조정을 수행합니다.

CSS의 변환 속성

CSS의 변환 속성을 사용하면 좌표 공간을 수정할 수 있습니다. CSS 시각적 모델. 변환을 통해 요소는 이동(변환), 회전(회전), 크기 조정(스케일) 및 기울일 수 있습니다(기울기).

이 속성에 없음 이외의 값이 있으면 스택 컨텍스트가 생성됩니다. 이 경우 개체는 포함된 위치 고정 요소에 대한 포함 블록 역할을 합니다.

CSS3 변환이 HTML 문서 흐름에 미치는 영향

body(또는 html)에 변환 속성을 추가하면 전체 본문 DOM이 해당 변환을 거치게 되지만, 이때 "전체"는 본문 아래의 표준 문서 흐름 요소만 나타냅니다. :fixed; 요소가 본문이 속한 문서 흐름에서 분리되었기 때문에 본문의 변형에 의존하여 해당 변형 효과를 자연스럽게 얻을 수 없습니다.

2. 전환 변환 초기 표시: 블록 왜 움직임이 없나요? 효과?

3. CSS3 변환은 어떻게 중심 회전을 달성할 수 있나요?

【관련 추천】

1. PHP 중국어 웹사이트 무료 동영상 튜토리얼: "php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼"

2. PHP 중국어 웹사이트 무료 동영상 튜토리얼: css3 구현 웹페이지 부드러운 전환 효과 비디오 튜토리얼

위 내용은 CSS3 변환 속성에 대한 자세한 설명 및 변환 사용법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!