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 >