Css3 conseguir a conversão 3D

Alcançar resultados:

Quando os paira mouse sobre a foto acima, subverte a imagem, copiá-lo e, em seguida, cancelar retomou rato

código de implementação:

<! DOCTYPE html > 
< html lang = "en" > 
< head > 
    < meta charset = "UTF-8" > 
    < title > 3D变换</ title > 
    < estilo > 
        * { 
            margem : 0 ; 
            estofamento : 0 ; 
        } 
        Corpo { 
            background-color : # 0d3462 ; 
        } 
        #Piclist { 
            width :760px ; 
            altura : 220px ; 
            margem : 100px auto ; 

        } 
        .Picbox { 
            flutuador : esquerda ; 
            largura : 170 pixels ; 
            altura : 190px ; 
            margem : 10px ; 
            posição : relativa ; 
            -webkit-transform-style : preservar-3d ; 
             -moz-transform-style : preservar-3d ;
             -ms-transform-style : preservar-3d ; 
             transformar-style : preservar-3d ; 
             transição : 1.5s ;  
        } 
        .Picbox: pairar { 
            transformar : rotateY (180 °) ;  
        } 
        .Face { 
            largura : 170 pixels ; 
            altura : 190px ; 
            posição : absoluto ; 
        } 
        .Front { 
            border : 2px solid # 4b2518; 
        } 
        .Contra { 
           -webkit-transform : rotateY (180 °) ; 
            -ms-transform : rotateY (180 °) ; 
            -o-transform : rotateY (180 °) ; 
            transformar : rotateY (180 °) ; 
            / * Background-color: # 4b2518; * / 
            Fronteira : #fff sólido 2px ; 
            
        } 
        .Contra h3 { 

            cor : branco ; 
            text-align : center ; 
        } 
    </estilo > 
</ head > 
< corpo > 
    < div id = "piclist" > 
        < div class = "picbox" > 
            < div class = "front face" > < img src = "images / 1.jpg" alt = "" > </ div > 
            < div class = "face traseira" > 
                < h3 >浓缩咖啡</ h3 > 
            </ div > 
            
        </ Div > 

        < div class= "picbox" > 
            < div class = "front face" > < img src = "images / 2.jpg" alt = "" > </ div > 
            < div class = "face traseira" > 
                < h3 >浓缩咖啡</ h3 > 
            </ div > 
            
        </ div > 

        < div class = "picbox" > 
            < div class = "front face" > < img src ="images / 3.jpg" alt = "" > </ div> 
            < Div class "face costas" = > 
                < h3 >浓缩咖啡</ h3 > 
            </ div > 
            
        </ div > 
        < div class = "picbox" > 
            < div class = "face front" > < img src = "imagens /4.jpg" alt = "" > </ div > 
            < div class = "face traseira" > 
                < h3 >浓缩咖啡</ H3 > 
            </ div >
            
        </ Div > 

    </ div > 
    
</ corpo > 
</ html >

 

Acho que você gosta

Origin www.cnblogs.com/kaoju/p/12629864.html
Recomendado
Clasificación