virar imagem(180deg)html e css
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;
}ul#album-fotos li#foto01 {
background: url('galeria-01.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li:hover {
transform: rotateY(180deg);
}ul#album-fotos li#foto02 {
background: url('galeria-02.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto03 {
background: url('galeria-03.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto04 {
background: url('galeria-04.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto05 {
background: url('galeria-05.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto06 {
background: url('galeria-06.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto07 {
background: url('galeria-07.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto08 {
background: url('galeria-08.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto09 {
background: url('galeria-09.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto10 {
background: url('galeria10.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto11 {
background: url('galeria11.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto12 {
background: url('galeria12.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto13 {
background: url('galeria13.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto14 {
background: url('galeria14.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto15 {
background: url('galeria15.jpg') no-repeat;
background-position: 50% 50%;
background-size: 300px 300px;
background-color: #ffffff;
}ul#album-fotos li#foto16 {
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;
}Discussão (5)
Carregando comentários...