A, CSS3 전환
운동의 전환에 의해 달성, 스케일링, 회전 요소 연신의 효과] 이 효과가 달성 될 수있는 원래의 이미지 또는 JS 처리가 있어야는 지금 CSS3에 의해 달성 될 수있다. 2D 변환하여 변환 효과를 달성하는 속성.
변환 특성의 두 번째 값
- () 회전 기능이 될 수 회전 기능
- 스케일 () 함수는 수 확대 기능
기능 셋째, 사용
회전 (°) 회전 : 변환
- 변환 값이 속성에 회전 기능을 괄호 안에 단위는 회전 각도이며, ℃에서 ( 학위 정도), 필요한 각도가 정의 될 수 또는 음의 설정 될 수있다.
- 값 이 시계 회전 방향 (왼쪽)에서, 네거티브 있어서 (오른쪽)를 반 시계 방향으로 회전
- 우리가 사용할 수있는 코드를 편집 할 때 trsf 확장 접두사는 밖으로 연장됩니다 (임의 입력 trsf가 변환 나타나지 : 회전을 () 속성 값)
예 하나 :
DIV 상자를 구성하는 박스는 마우스 오버 달성하기 위해 시계 방향으로 회전된다 30deg의 효과. (우리의 각도가 네거티브 값으로 설정되면 왼쪽으로 기울 것이다)
1 <! DOCTYPE html로 > 2 < HTML LANG = "EN" > 3 < 선두 > 4 < 메타 캐릭터 = "UTF-8" > 5 < 타이틀 > 2D转换</ 타이틀 > 6 < 스타일 > 7 체 { 8 위치 : 상대 ; 9 폭 : 400 픽셀 ; 10 높이 : 400 픽셀 ; (11) / * 상단 : 100 픽셀; * / 12 / * 좌 : 100 픽셀; * / 13 / * 테두리 : 2 픽셀 적색 고체; * / 14 15 } 16 DIV { 17 폭 : 100 픽셀 ; 18 높이 : 75px ; 19 배경 색 : # 939 ; 20 국경 : 2 픽셀 블루 고체 ; 21 위치 : 절대 ; 22 } 23 #rotateDiv { 24 최고 : 300 픽셀 ; 25 왼쪽 : 100 픽셀 ; 26 } 27 #rotateDiv : 호버 { 28 변형 : 회전 (30deg)를 ; (29) ; } 30 </ 스타일 > 31 </ 헤드 > 32 < 본문 > 33 < DIV ID = "rotateDiv" > transform2 </ DIV > 34 </ 바디 > 35 </HTML >
성능 결과 :
변환 : 크기 (X, Y)을, 줌
- 변환 값 애트리뷰트 의 기능 확장 시간, 그 설정 가능 수평 방향 과 수직 방향 의 배율.
- X : 스케일링 인자 수평 방향 (횡 방향). Y : 수직 방향 (높이)에서 다수의 스케일링은 x의 값을 생략하는 경우, (예를 들어, 변환 축척 (130)는 가로 및 세로가 1.3 배수 나타냄)
- X 와 Y 사이에 값 (0~1)의 감소 (> 1) 확대
예 2 :
호버 상자에 구현 될 때, 상자는 1.3 배의 효과를 확대.
1 <! DOCTYPE html로 > 2 < HTML LANG = "EN" > 3 < 선두 > 4 < 메타 캐릭터 = "UTF-8" > 5 < 타이틀 > 2D转换</ 타이틀 > 6 < 스타일 > 7 체 { 8 위치 : 상대 ; 9 폭 : 400 픽셀 ; 10 높이 : 400 픽셀 ; (11) / * 상단 : 100 픽셀; * / 12 / * 좌 : 100 픽셀; * / 13 / * 테두리 : 2 픽셀 적색 고체; * / 14 } 15 DIV { 16 폭 : 100 픽셀 ; 17 높이 : 75px ; 18 배경 색 : # 939 ; 19 국경 : 2 픽셀 블루 고체 ; 20 위치 : 절대 ; 21 } 22 # BOX1 : 호버 { 변환: 스케일 (1.3) } 23 </ 스타일 > 24 </ 헤드 > 25 < 본문 > 26 < DIV ID = "BOX1" > transform1 </ DIV > 27 </ 바디 > 28 </ HTML >
성능 결과 :
