CSS (크롬)에 대한 설명과 데모를 변환

2D 또는 3D는 요소 변환 응용 프로그램의 속성을 변환. 이 속성은 요소 회전, 크기 조절이나 운동을 기울임에 우리를 할 수 있습니다.

변환 (CSS3 전환)

참고 :이 효과를 공백으로 구분하여, 중첩 할 때

효과 : 소자가 이동 될 수 있고, 스케일링, 회전, 신장은 연신

변환 : 효과 소자의 형상, 크기, 위치를 변경하게

변환 : 변환 방법을 :

1 번역 () 메소드

x 축에 따라 X (X)를 번역

변환 (Y)는 Y-Y 축을 따라

translateXY (X, Y) : X 축에 따라 X, Y는 Y 축을 따라

암호:

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
    <메타 캐릭터 = "UTF-8"> 
    <TITLE> 제목 </ TITLE> 
    <스타일> 
        #origin { 
            폭 : 100 픽셀; 
            높이 : 100 픽셀; 
            배경 - 색상 : 빨강; 
        } 
        #translateX { 
            폭 : 100 픽셀; 
            높이 : 100 픽셀; 
            배경 - 색상 : 빨강; 
            변환 : translateX를 (100 픽셀); 
        } 
        #translateY { 
            폭 : 100 픽셀; 
            높이 : 100 픽셀; 
            배경 - 색상 : 빨강;
            변환 : translate Y를가 (100 픽셀); 
        } 
        #translateXY { 
            폭 : 100 픽셀; 
            높이 : 100 픽셀; 
            배경 - 색상 : 빨강; 
            변환 : 변환 (100 픽셀을 100 픽셀); 
        }
     </ 스타일> 
</ head> 
<body> 

<DIV ID = "기원"> 
</ DIV> 
<DIV ID = "translateX"> 
</ DIV> 
<DIV ID = "translate Y를"> 
</ DIV> 
<DIV ID = "translateXY"> 
</ div> 
</ BODY> 
</ HTML>

결과는 다음과 같습니다 :

참고 : translateX에 해당 사실, (200 픽셀) 번역 (200 픽셀).

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
    <메타 캐릭터 = "UTF-8"> 
    <TITLE> 제목 </ TITLE> 
    <스타일> 
        #origin { 
            폭 : 100 픽셀; 
            높이 : 100 픽셀; 
            배경 - 색상 : 빨강; 
            (200 픽셀)을 번역; 변환 
        } 
    </ 스타일> 
</ head> 
<body> 

<DIV ID = "기원"> 
</ DIV> 
</ BODY> 
</ HTML>

효과 :

번역 () 메소드 3D 변환

또한, Z 축에서의 변화의 이상이다.

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
    <메타 문자 집합 = "UTF-8."> 
    <제목> 제목 </ 제목> 
    <스타일> 

        #parent { 
            폭 : 500 픽셀, 
            높이 500 픽셀; 
            -webkit -perspective : 1000px; / * 렌즈, 기본적으로 중심에 렌즈면의 거리의 관점에서 유래하여 * / 조정될 수있다 
            -webkit-투시 기원 : 50 픽셀 50 픽셀 / * 관점 특정 위치 / 평면에서 
        } 

        #origin { 
            폭 : 100 픽셀, 
            높이 100 픽셀; 
            위치 : 절대; 
            최고 : 0 픽셀, 
            왼쪽 : 0 픽셀, 
            배경 색 : 빨강;
        } 

        #translateZ { 
            폭 : 100 픽셀;
            높이 : 100 픽셀; 
            위치 : 절대; 
            최고 : 0 픽셀; 
            왼쪽 : 0 픽셀; 
            배경 색상 : 블루; 
            -webkit-변환 : translate3d (50 픽셀, 50 픽셀, 50 픽셀); 
        } 

    </ 스타일> 
</ head> 
<body> 
<DIV ID = "부모"> 
    <DIV ID = "기원"> 
    </ DIV> 
    <DIV ID = "translateZ"> 
    </ DIV> 
</ DIV> 
</ body> 
</ HTML>

원근법과 같은 조건에서 부모 요소의 속성을 설정해야합니다

CSS (크롬)에 대한 설명과 데모를 변환

변환 (CSS3 전환)

변환 : 변환 방법을 :

1 번역 () 메소드

번역 () 메소드 3D 변환

추천