CSS3로 객체를 변형하는 방법 - CSS3에서

CSS3에서 변형 은 화면의 객체 모양을 특정 방식으로 변경합니다. 예를 들어, 객체를 회전하거나 치수를 기울일 수 있습니다. 변환을 통해 공통 객체에서 고유 한 프리젠 테이션을 쉽게 만들 수 있습니다. 일반적으로 디자이너 또는 그래픽 아티스트가 제작해야하는 효과가 있습니다. 다음 목록은 수행 할 수있는 변환의 종류를 설명합니다. 매트릭스 (a, b, c, d, tx, ty): 점 a, b, c 및 d에 의해 정의 된 행렬을 사용하여 대상을 비뚤어지게 만듭니다. 그런 다음 tx 및 ty로 표시된 값으로 화면에서 객체의 위치를 변환합니다. (w3schools.co.kr에서 matrix () 변환을 시도 할 수 있습니다.)

3 차원 객체에서 작동하는 많은 함수 버전이 있습니다. 예를 들어, matrix3d () 함수가 있습니다. 이 함수는 3 차원 공간에서 3 차원 객체를 조작 할 수 있도록 방정식에
z 축을 추가합니다. Mozilla Developer Network 및 CSS-Tricks에서 3D 버전의 작동 방식에 대한 자세한 내용을 볼 수 있습니다. translate (tx, ty), translateX (tx), translateY (ty): tx로 정의 된 가로 크기, ty로 정의 된 세로 크기 또는 둘 다를 사용하여 화면에서 오브젝트의 위치를 수정합니다. (w3schools.com에서 translate () 변형을 시도 할 수 있습니다.)
rotate (angle), rotateX (angle), rotateY (angle): 원하는 축에 지정된 각도로 객체를 회전합니다. (w3schools.co.kr에서 rotate () 변환을 시도 할 수 있습니다.)
Internet Explorer가 모든 변환을 지원하지는 않습니다. 예를 들어 Internet Explorer 9이 rotateX () 및 rotateY () 함수를 지원하지 않는다는 것을 알 수 있습니다.
skew (angleX, angleY), skewX (angleX), skewY (angleY): angleX에 의해 가로로 지정된 각도 수, angleY로 세로로 지정된 각도 수 또는 둘 다로 개체를 기울입니다. (w3schools.co.kr에서 skew () 변형을 시도 할 수 있습니다.)
이러한 변환을 이해하는 가장 좋은 방법은 실제로 변환을 보는 것입니다. 다음 프로 시저를 사용하면 수행 할 수있는 변환을 보여주는 샘플 응용 프로그램을 작성할 수 있습니다.
텍스트 편집기로 새 HTML5 파일을 만듭니다.

HTML 페이지에 다음 코드를 입력하십시오.

변형 예제

행렬

번역

축척

회전

회전 Y

기울이기

이 예에서는 단락으로 나열된 변형을 보여줍니다.예제를 수정하여 다른 변형을 시도 할 수 있습니다 (좋은 아이디어).

파일을 변환으로 저장하십시오. HTML.

텍스트 편집기로 새 CSS 파일을 만듭니다.

다음 CSS 스타일 정보를 입력하십시오.
# 매트릭스 {경계선: 솔리드; 국경 색깔: 검정; border-width: thin; 글꼴 크기: 30px; 여백: 50px; 너비: 140px; 높이: 40px; 변환: 행렬 (0.866, 0.5, 0.4, 0.866, 5, 15); -ms-transform: 행렬 (0 866, 0.5, 0.4, 0. 866, 5, 15); -webkit-transform: 행렬 (0 866, 0.5, 0, 4, 0 866, 5, 15);} #Translate {border: solid; 국경 색깔: 검정; border-width: thin; 글꼴 크기: 30px; 여백: 50px; 너비: 140px; 높이: 40px; 변형: 번역 (20px, 30px); -ms-transform: translate (20px, 30px); -webkit-transform: translate (20px, 30px);} #Scale {테두리: 단색; 국경 색깔: 검정; border-width: thin; 글꼴 크기: 30px; 여백: 50px; 너비: 140px; 높이: 40px; 변형: 척도 (1.6, 0. 75); -ms-transform: 축척 (1..6, 0. 75); -webkit-transform: scale (1.6, 0. 75);} # 회전 {테두리: 실선; 국경 색깔: 검정; border-width: thin; 글꼴 크기: 30px; 여백: 50px; 너비: 140px; 높이: 40px; 변형: 회전 (140deg); -ms-transform: rotate (140deg); -webkit-transform: rotate (140deg);} #RotateY {테두리: 실선; 국경 색깔: 검정; border-width: thin; 글꼴 크기: 30px; 여백: 50px; 너비: 140px; 높이: 40px; 변형: rotateY (140deg); -ms-transform: rotateY (140deg); -webkit-transform: rotateY (140deg);} #Skew {테두리: 솔리드; 국경 색깔: 검정; border-width: thin; 글꼴 크기: 30px; 여백: 50px; 너비: 140px; 높이: 40px; 변형: 비뚤어 짐 (15도, 30도); -ms-transform: 스큐 (15도, 30도); -webkit-transform: skew (15deg, 30deg);}
이러한 각각의 변형은 정확하게 동일한 단락 형식을 사용하므로 어떻게 작동하는지 더 잘 이해할 수 있습니다. 경계선을 사용하면 단어와 화면 객체의 결합이 더 많은 정보를 전달하기 때문에 변환을 더 쉽게 이해할 수 있습니다 (자신 만의 테스트 응용 프로그램을 만들 때 기억해야 할 사항). 변환은 사양의 일부로 표시 되더라도 실험으로 간주됩니다. Internet Explorer 9 이상에서 사용하려면 -ms- 접두사를 포함해야합니다. Safari와 Chrome 모두 -webkit- 접두사가 필요합니다. 이것이 각 변형을 세 번 나열한 이유입니다. 변환은 아무런 문제없이 Opera와 Firefox 모두에서 작동해야합니다.
```
파일을 변환으로 저장하십시오. CSS.
```
변형 예제로드.

변형 효과를 볼 수 있습니다. 이러한 모든 변환은 동일한 글꼴, 글꼴 크기 및 상자 크기를 사용하므로 표시되는 차이는 전적으로 발생하는 변환 때문입니다. rotateY () 변환은 실제로 텍스트를 뒤로 보여줍니다.
변경 사항이 출력에 미치는 영향을 보려면 변형 값을 수정 해보십시오. 이러한 기능이 얼마나 유연한 지에 놀랄 것입니다.
변형을 결합하여 훨씬 특별한 효과를 만들 수 있습니다. 단순히 공간과 함께 분리하십시오. 예를 들어, rotate ()를 skew ()와 결합하려면

transform을 입력하십시오: rotate (25deg) skew (15deg, 30deg);