3D 변환을 달성 CSS3

결과를 얻을 수 :

위의 그림 위에 마우스 마우스 오버이 사진을 전복 할 때 복사 한 다음 마우스를 다시 취소

구현 코드 :

<! DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 선두 > 
    < 메타 캐릭터 = "UTF-8" > 
    < 타이틀 > 3D变换</ 타이틀 > 
    < 스타일 > 
        * { 
            마진 : 0 ; 
            패딩 : 0 ; 
        } 
        몸 { 
            배경 색 : # 0d3462 ; 
        } 
        #piclist { 
            폭 :760px ; 
            높이 : 220px ; 
            마진 : 100 픽셀 자동 ; 

        } 
        .picbox { 
            플로트 : 왼쪽 ; 
            폭 : 170px ; 
            높이 : 190px ; 
            여백 : 10px ; 
            위치 : 상대 ; 
            -webkit-변환 - 스타일 : 보존-차원 ; 
             -moz-변환 - 스타일 : 보존-차원 ;
             -ms-변환 - 스타일 : 보존-차원 ; 
             변환 - 스타일 : 보존-차원 ; 
             전환 : 1.5S ;  
        } 
        .picbox : 호버 { 
            변환 : rotateY (180도)를 ;  
        } 
        .face { 
            폭 : 170px ; 
            높이 : 190px ; 
            위치 : 절대 ; 
        } 
        .front { 
            국경 : 2 픽셀 고체 #의 4b2518; 
        } 
        .back { 
           -webkit-변환 : rotateY (180도)를 ; 
            -ms-변환 : rotateY (180도)를 ; 
            -O-변환 : rotateY (180도)를 ; 
            변환 : rotateY (180도)를 ; 
            / * 배경 컬러 : # 4b2518; * / 
            테두리 : 2 픽셀 고체 #fff ; 
            
        } 
        H3 .back { 

            색상 : 흰색 ; 
            텍스트 정렬 : 센터 ; 
        } 
    </스타일 > 
</ 헤드 > 
< 본문 > 
    < DIV ID = "piclist" > 
        < DIV 클래스 = "picbox" > 
            < DIV 클래스 = "얼굴 정면" > < IMG SRC = "이미지 / 1.JPG" ALT = "" > </ DIV > 
            < DIV 클래스 = "얼굴 위로" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV > 
            
        </ DIV > 

        < DIV 클래스= "picbox" > 
            < DIV 클래스 = "얼굴 정면" > < IMG SRC = "이미지 / 2.JPG" ALT = "" > </ DIV > 
            < DIV 클래스 = "얼굴 위로" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV > 
            
        </ DIV > 

        < DIV 클래스 = "picbox" > 
            < DIV 클래스 = "얼굴 정면" > < IMG SRC = "이미지 / 3.JPG " ALT =" " > </ DIV> 
            < DIV 클래스 = "얼굴 위로" > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV > 
            
        </ DIV > 
        < DIV 클래스 = "picbox" >은 
            < DIV 클래스 = "얼굴 정면" > < IMG SRC = "이미지 /4.jpg " ALT =" " > </ DIV > 
            < DIV 클래스 ="얼굴 위로 " > 
                < H3 >浓缩咖啡</ H3 > 
            </ DIV >
            
        </ DIV > 

    </ DIV > 
    
</ 바디 > 
</ HTML >