그것은 요소 CSS3 변환, 스케일링, 회전, 이동 또는 신장을 연신함으로써 수행 될 수있다. 그것은 어떻게 작동합니까? 변환 효과 소자의 형상, 크기 및 위치를 변경하는 것이다. CSS3 변환은 2D 및 3D 변환, 우리는 변환 방법 2D 변환을 이해하고이 요약의 변환을 포함한다.
변환 특성과 상기 변환 출처 변형은, 이들은하기 표 1에 기재되어있다 :
표 1 변환 속성
다섯 가지 방법, 표 2에서의 도입 방법이 있습니다 변환에있어서,
표 2 변환 방법
1 번역 () 메소드
변위의 함수 () 변환함으로써, 왼쪽의 주어진, 현재 위치에서 요소는 위치 파라미터 (X 좌표) 및 상단 (Y 좌표). 번역 () 메소드는 translateX () translate Y를, () 메소드로 분할 할 수 있으며, 파라미터는 좌측 및 소자의 상단 위치에 제공된다. 여기서, 상기 방법을 설명하기 위해 예를 들어, 우리는 좌측 IMG 요소를 0으로 세트, 상부가 브라우저 내로 이동 마우스,이 우측으로 이동 현재 위치 아래쪽으로 50 픽셀, 100 픽셀에 대하여 이동 0으로 설정하고,이를 정제하여 전환 효과는 다음과 같이, 리더가 효과를 달성하기위한 번역 () 메소드를 더 잘 이해할 수되도록 설정된다 :
코드는, 화상의 좌측 IMG가 100 픽셀 인은,도 1에 도시 된 브라우저의 초기 효과를 수행 해석된다 :
도 1 번역 () 메소드
마우스가 브라우저에 입력하면, 우리는도 2에 도시 된 브라우저의 검색 결과의 실시 예에서, 100 픽셀이 오른쪽으로 이동, 이전 위치가 50 픽셀에 대해 하방으로 이동되어 변경된 화상의 위치를 찾을 수있다 :
도 2 번역 () 메소드
2 회전 () 메소드
()는이 회전에있어서, 요소를 시계 방향으로 소정 각도 회전. 음극 소자의 반 시계 회전을 허용한다. 기본 회전 기초 요소 센터 포인트.
마찬가지로, 우리는 작은 사건을 통해이 방법을 설명합니다. HTML 파일은 IMG 요소를 포함하는 경우 문서에 마우스, 그래서 그 사진 회전의 180도. 다음과 같이 코드입니다 :
코드는 마우스로, 이미지 IMG의 초기 상태가 회전되지 않고, 해석 할 때 신체 이미지가 이미지 회전 시계 방향으로 180도 2 초, 기본 회전 중심점 후. 그림 3에서 초기 효과 브라우저를 수행합니다 :
도 3 회전 회전
브라우저에 마우스를 이동, 우리는 사진이 반전되었다 볼 수있을 때, 그 회전 180도, 그림 4의 브라우저에서 결과의 구현은 다음과 같습니다
도 4 회전 회전
또한, 우리가 이미지의 회전 위치를 설정할 수 변환 기원 재산권 우리 변환 할 수있는 소자의 위치를 변경할 수 있도록, 변환 요소는 2D 요소 x와 y 축으로 변경 될 수있다. 속성 구문은 다음과 같습니다
변환 - 기원 : X 축, Y 축, Z 축;
속성의 기본값은 "50 % 50 % 0"입니다 2D 변환을 위해, 우리는 단지 z 축 무시할 수, 그것은 3D 변환을위한 값을 설정하는 데 필요한, 우리는 다음 장에서 언급 할 것이다. 및 특성 값을 표 3에 기재된 :
표 3 변환 속성
왼쪽 상단의 변환 소자를 설정하는 변환 - 원점 위치를 사용함으로써. CSS 코드 위의 예는 다음으로 대체 :
마우스가 몸에 이동 할 때, 우리는 중심점을 그림의 왼쪽 가장자리, 180도 회전 그림 5 브라우저에서 결과의 이행 것을 볼 수있다 :
도 변환 소자 (5)에 배치 된 위치