Galeria de imagens

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... ``` Galeria de imagens

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; } ```

Marquinhoscw

virar imagem(180deg)html e css