<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "ancho = ancho del dispositivo, escala inicial = 1.0">
<title> Honeycomb </ title>
<style>
.boxFw {
ancho: 800px;
margen: 0 automático;
relleno: 0;
}
.boxFw> li {
ancho: 130px;
altura: 74 px;
color de fondo: # 2722226b;
flotador izquierdo;
list-style-type: ninguno;
margen: 40px 10px;
posición: relativa;
pantalla: flex;
alinear elementos: centro;
justify-content: centro;
}
img {
ancho: 40%;
altura: 70%;
margen: 0 automático;
pantalla: flex;
radio de borde: 60%;
índice z: 1;
borde: 2px sólido #ccc;
}
.boxFw> li :: before {
contenido: '';
ancho: 130px;
altura: 74 px;
posición: absoluta;
arriba: 0px;
izquierda: 0px;
color de fondo: # 3e35358f;
transformar: rotar (60 grados);
}
.boxFw> li :: después de {
contenido: '';
ancho: 130px;
altura: 74 px;
posición: absoluta;
arriba: 0px;
izquierda: 0px;
color de fondo: # 3e35358f;
transformar: rotar (120 grados);
-webkit-transform: rotar (120deg);
}
.activo{
transformar: rotar (360 grados) escala (1.2);
transición: 1s;
-webkit-transition: 1s;
-o-transición: 1s;
}
.activewremove {
transformar: rotar (0deg) escala (1);
transición: 1s;
-webkit-transition: 1s;
-o-transición: 1s;
}
</style>
</head>
<cuerpo>
<ul class = 'boxFw'>
<li> <img src = "./ img / 1.jpg" alt = ""> </li>
<li> <img src = "./ img / 2.jpg" alt = ""> </li>
<li> <img src = "./ img / 3.jpg" alt = ""> </li>
<li> <img src = "./ img / 4.jpg" alt = ""> </li>
<li> <img src = "./ img / 5.jpg" alt = ""> </li>
<li style = "margin-left: 85px;"> <img src = "./ img / 6.jpg" alt = ""> </li>
<li> <img src = "./ img / 7.jpg" alt = ""> </li>
<li> <img src = "./ img / 8.jpg" alt = ""> </li>
<li> <img src = "./ img / 9.jpg" alt = ""> </li>
<li> <img src = "./ img / 10.jpg" alt = ""> </li>
<li> <img src = "./ img / 11.jpg" alt = ""> </li>
<li> <img src = "./ img / 12.jpg" alt = ""> </li>
<li> <img src = "./ img / 13.jpg" alt = ""> </li>
<li> <img src = "./ img / 14.jpg" alt = ""> </li>
</ul>
</body>
<script>
var eleme = document.getElementsByTagName ("img")
for (var i = 0; i <eleme.length; i ++) {
eleme [i] .onmouseover = function () {
this.classList.add ("activo")
this.classList.remove ("activewremove")
};
eleme [i] .onmouseout = function () {
this.classList.add ("activewremove")
this.classList.remove ("activo")
};
}
</script>
</html>