비디오: 일러스트레이터 파일을 HTML5 canvas와 p5js 코드로 변환하기 (Adobe Illustrator to p5js) 2024
CSS3는 HTML5 웹 페이지의 모든 요소에 기하학적 변형을 적용 할 수있는 기능을 포함합니다. 이전에는 웹 개발자가 볼 수 없었던 놀라운 수준의 시각적 컨트롤을 제공합니다.
변형 속성을 사용하면 모든 div에 수학적 변형을 적용 할 수 있습니다. 요소에 변형을 적용 할 때 다음 매개 변수 중 하나 이상을 적용하여 변형 유형을 설명해야합니다.
-
translate : 개체를 기본 위치에서 이동합니다. 변환에는 X 측정 값과 Y 측정 값의 두 가지 매개 변수가 필요합니다. 표준 CSS 측정 단위를 사용하십시오.
-
rotate : 이미지를 가운데 값으로 회전합니다. 하나의 매개 변수, 각도 단위의 각도를 취합니다. (예: 30 도는 30deg입니다.)
-
눈금 : 대상체의 크기를 변경합니다. 표준 버전은 수평 및 수직 크기를 동일하게 변경합니다. scalex 및 scaley 속성을 사용하여 개별 축을 따라 축척을 조정할 수 있습니다. 눈금은 표준 CSS 측정 단위로 측정됩니다. 배율이 1보다 크면 객체가 원본보다 커집니다. 0과 1 사이의 눈금은 항목을 원래대로보다 작게 만듭니다.
-> -
기울기 : 이것은 어떤 각도로 요소를 기울일 수있게합니다. 이 매개 변수에는 각도 단위의 각도 측정이 필요합니다. skewx 및 skewy 변형을 사용하면 변형을보다 완벽하게 제어 할 수 있습니다.
여러 매개 변수를 공백으로 구분 된 변환 속성 뒤에 나열하여 조합 할 수 있습니다.
박스 9
상자 2 상자 3 상자 4 상자 5 이 코드는 다섯 개의 동일한 div를 보여줍니다. 설명을 위해 모든 div는 동일한 공통 CSS를 공유합니다:
각 요소에 변형을 적용하여 변형의 작동 방식을 확인합니다. # box5 {transform: 기울이기 (skew)] 상자 # 4 변형: 변형 (2x) 변환 (100px, 0px);} # box5 {transform: 기울이기 (3);}
이 요소에서 브라우저 지원이 변경됩니다. Chrome과 Safari는 여전히 -webkit 접두사를 기대하지만 Firefox와 Opera는 접두사가없는 버전을 지원합니다. IE 10은 이론적으로 표준 버전과 함께 작동하지만 버전 9는 -ms- 접두어가 필요하며 이전 버전의 IE는 단순히 변환을 모두 무시합니다. 변환의 실제 소스 코드를 보는 경우.html 사이트에서는 다양한 브라우저를 처리 할 수있는 여러 버전이 있습니다.
# box2 {transform: translate (100px, 0px); -webkit-transform: 번역 (100px, 0px); 결국에는 상식이 깨지고 공급 업체 고유의 접두사는 더 이상 필요하지 않게되지만 당분간은 모든 것을 넣는 것이 가장 안전합니다. 이전 버전의 Firefox와 Opera를 사용하려면이 (-moz-와 -o-) 접두사도 포함시킬 수 있습니다.
