CSS3 2D 변환으로 살펴보기
그만큼 변환 모듈 CSS3의 엄청난 추가 기능입니다. 웹 사이트의 요소를 다음 단계로 조작하는 방식을 취합니다..
실제로 저를 놀라게하는 몇 가지 실험이 있습니다. 그러나 우리는 CSS로만 구성된 아이콘과 같은 것을 만들지 않을 것입니다.이 아이콘은 어쨌든 Autobot으로 변형 될 수 있습니다. 실제 크기에서도 압도적으로 사용하기에는 적합하지 않을 수 있습니다..
대신, 이번에는 CSS3 2D 변환의 기본 사항을 검토하고 기본적인 수준에서 어떻게 작동하는지 살펴 보겠습니다..
구문
CSS3 변환 모듈은 기본적으로 변환, 크기 조절, 회전 및 기울이기와 같은 특정 범위로 요소를 변형 할 수있게합니다.
공식 구문은 다음과 같습니다. transform : 메서드 (값). 그러나 다른 CSS3의 추가 기능이 초기 단계 인 것과 마찬가지로 현재 브라우저는 여전히 변환을 실행하는 구문 버전이 필요합니다. 따라서 완전한 구문은 다음과 같이 나타납니다.
변환 : 방법 (값); / * W3C 공식 구문 * / -o-transform : method (value); / * Opera 10.5 이상 * / -ms-transform : 메서드 (값); / * Internet Explorer 9.0 이상 * / -moz-transform : method (value); / * Firefox 3.6 이상 * / -webkit-transform : method (value); / * Chrome / Safari 3.2 이상 * /
또한 위에서 언급 한 방법은 변환 함수, 이는 다음 중 하나로 대체 될 수 있습니다 : 옮기다(), 규모(), rotate () 또는 비스듬한().
가치
메소드의 값의 대부분은 X 축 과 Y 축. 고등학교 수학 수업에서 데카르트 좌표계를 기억하면 기본 원리는 매우 유사합니다. X 축은 수평의 라인을 나타내고, Y 축은 수직선 선.
회전을 제외하고. 그만큼 회전 는 극좌표 0에서 360 사이의 각도로 표현됩니다..
모든 메소드의 값은 음수 또는 양수가 될 수 있습니다. 그러나 웹 페이지가 위에서 아래로 순차적으로 읽혀 지므로 웹의 Y 축이 직교 좌표의 원래 원리와 반대 방향으로 작동하게되므로 메모를 작성하십시오. 즉, 음수 값을 Y 축, 대신 상단으로 이동합니다..
변환 사용
자, 다음과 같은 기본 데모를 통해 변형의 변화를 살펴 보겠습니다..
나는 번역한다
이 용어로 흐려지지 마라. 옮기다, 그것은 외국어를 번역하지 않습니다. 그만큼 옮기다 여기에 실제로 어떤 방향으로 요소를 이동하는 방법입니다..
이 메소드는 두 개의 값을 포함합니다. 엑스 과 와이. 그만큼 X 값 위에서 지적한대로 요소를 가로로 가져옵니다. 왼쪽 또는 오른쪽으로, 동안 와이 값은 바닥 또는 상단.
이제 간단한 데모를 보도록하겠습니다.
div width : 100px; 높이 : 100px; 변형 : 번역 (100px, 250px);
위의 스 니펫은 요소를 오른쪽으로 100 픽셀 이동하고 하단으로 250 픽셀 이동합니다..
div width : 100px; 높이 : 100px; 변형 : 번역 (100 픽셀, 0);
위의 스 니펫은 Y 축을 제로화하기 때문에 요소를 오른쪽으로 100 픽셀 이동합니다. 그런 다음 요소를 왼쪽으로 이동하려면 다음과 같이 X 축을 음수로 설정하면됩니다.
div width : 100px; 높이 : 100px; 변형 : 번역 (-100 픽셀, 0);
- "번역"데모
또는 이러한 개별 메소드를 사용하여 요소를 한 방향으로 이동할 수 있습니다. translateX () 과 translateY (), 차이점은 각각의 메소드가 하나의 값만을 허용한다는 것입니다..
그래서 실질적으로 변형 : 번역 (-100 픽셀, 0) 또한 변형 : translateX (-100 픽셀).
II - 규모
그만큼 규모 방법으로 확대 또는 축소하다 실제 크기의 요소. 척도의 값은 옮기다 위의 방법은 X와 Y도 포함합니다. 유일한 차이점은 단위를 지정하지 않는다는 것입니다. 다음은 그 예입니다.
div width : 100px; 높이 : 100px; 변형 : 척도 (1.5);
위의 예는 div 1.5 또는 150 % 실제 크기, 우리는 X와 Y 방향 모두에 대해 똑같이 크기를 조절하므로 하나의 값으로 선언하면됩니다. 이 방법으로 선언 할 수도 있습니다. 변형 : 척도 (1.5,1.5); 더 자세하게 가고 싶다면, 똑같은 일을 할 것입니다..
또한 요소를 줄이려면 아래 예제처럼 0.999에서 절대 0까지의 값을 사용합니다. 그러면 div의 크기가 50 % 또는 절반으로 줄어 듭니다.
div width : 100px; 높이 : 100px; 변환 : 눈금 (0.5);
그러나 값을 절대 값으로 설정하면주의해야합니다. “0” 그만큼 div 당신이 그렇게 할만한 타당한 이유가 없다면, 나는 그것을하는 것을 권하지 않을 것입니다..
- "스케일"데모
III - 회전
이 게시물 앞부분에서 언급했듯이 회전하다 메서드는 극좌표를 사용하므로 값은도 단위로 표시됩니다. 두 가지 예가 있습니다.
아래 스 니펫은 div 시계 방향으로 30도.
div width : 100px; 높이 : 100px; 변형 : 회전 (30도);
아래 예에서와 같이 음수 값을 지정하면 div 반대 방향 (반 시계 방향)으로 동일한 정도.
div width : 100px; 높이 : 100px; 변형 : 회전 (-30deg);
- "회전"데모
IV - 기울이기
그만큼 비스듬한 메서드를 사용하면 일종의 평행 사변형을 만들 수 있습니다. 또한 X 축과 Y 축의 두 값을 포함합니다. 그러나 값 자체는 선형 측정 대신 학위로 표시됩니다. 규모 아니면 그 옮기다 방법. 다음은 그 예입니다.
div width : 200px; 높이 : 100px; 변형 : 비뚤어 짐 (30도, 10도);
- "비뚤어 짐"데모
V - 여러 방법
그만큼 변환 속성은 하나의 메서드 만 처리하도록 제한되지 않습니다. 실제로 다음과 같이 단일 선언에 여러 메서드를 포함 할 수 있습니다.
div width : 100px; 높이 : 100px; 변형 : translateX (100 픽셀) rotate (45deg);
위의 스 니펫은 요소를 100 픽셀 오른쪽으로 이동하고 동시에 45도 회전합니다.
"다중 방법"데모.
변환 원점
그만큼 transfrom-origin - 그 이름에서 알 수 있듯이 - 변환의 시작점을 제어하는 데 사용됩니다. 다음 구문을 사용하여이 속성을 명시 적으로 선언하지 않은 경우 변환 원점 : X Y;, 브라우저는 X에 대해 50 %이고 Y에 대해 50 % 인 기본값을 취합니다.
이제 우리가 변형 원점 0 (X) 0 (Y)로 변환이 시작됩니다..
다시 말하지만, 모든 브라우저는 여전히이 속성을 호출하기 위해 접두사 버전을 필요로합니다. 이제는 최신 버전의 브라우저에서 작동하는지 확인하기위한 전체 버전이 있습니다.
-webkit-transform-origin : X Y; -moz-transform-origin : X Y; -o-transform-origin : X Y; -ms-transform-origin : X Y; 변환 원점 : X Y;
- "변형 원점"데모
결론
우리는 네 가지 필수적인 변형 방법을 모두 경험했습니다. 번역, 크기 조정, 회전 및 기울이기
그러나 언급 한 바와 같이이 모듈은 아직 초기 단계이므로 다음 웹 사이트에서이 방법을 적용 할 경우 호환되지 않는 브라우저가 정상적으로 성능이 저하되는지 확인하십시오 (여기서 IE6은 언급하지 않음).
마지막으로 모든 데모를 보거나 다음 링크에서 소스를 다운로드 할 수 있습니다..
- 데모
- 소스 다운로드
