Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal.
Entao... gostaria de ajuda. estou tentando criar uma galeria de fotos onde se você aproximar o mouse sobre a imagem, vire em 180 graus. Porém estou tento bastante dificuldades
segue o codigo HTML...
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Galeria de imagens</title>
<link rel="stylesheet" href="_css/fotos.css"/>
</head>
<body>
<section id="principal">
<ul id="album-fotos">
<li id="foto01"><span></span></li>
<li id="foto02"><span></span></li>
<li id="foto03"><span></span></li>
<li id="foto04"><span></span></li>
<li id="foto05"><span></span></li>
<li id="foto06"><span></span></li>
<li id="foto07"><span></span></li>
<li id="foto08"><span></span></li>
<li id="foto09"><span></span></li>
<li id="foto10"><span></span></li>
<li id="foto11"><span></span></li>
<li id="foto12"><span></span></li>
<li id="foto13"><span></span></li>
<li id="foto14"><span></span></li>
<li id="foto15"><span></span></li>
<li id="foto16"><span></span></li>
</ul>
</section>
</body>
</html>
CSS....
@charset "UTF-8";ul#album-fotos li{
float: left;
width: 150px;
height: 150px;
margin: 10px;
border: 5px solid #fff;
background-color: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,.4);
list-style: none;
} background: url('galeria-01.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} transform: rotateY(180deg);
} background: url('galeria-02.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-03.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-04.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-05.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-06.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-07.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-08.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria-09.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria10.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria11.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria12.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria13.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria14.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria15.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
} background: url('galeria16.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}
#principal {
width: 900px;
height: auto;
margin: 0 auto;
background: #fff;
}Carregando comentários...