Soy nuevo en Html5 y me gustaria poder reducir o ampliar con el navegador unos div con imagenes troceadas, es decir, que sea responsive.
Este codigo lo he encontrado en Internet y estoy modificando el CSS pero no me funciona. Me podeis ayudar por favor?
Muchas gracias.
Este es el codigo html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>x</title>
<link href="juego.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="contenedor">
<article>
<div class="pieces" id="piece-1"></div>
<div class="pieces" id="piece-2"></div>
<div class="pieces" id="piece-3"></div>
<div class="pieces" id="piece-4"></div>
<div class="pieces" id="piece-5"></div>
<div class="pieces" id="piece-6"></div>
</article>
</div>
<p></p>
</body>
</script>
<script src="juego.js" type="text/javascript"></script>
</html>
Y ESTE EL CSS:
body{
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
color: #616c84;
background: #ffffff;
line-height: 1.7em;
padding: 0;
margin: 0;
}
p{
margin-top: 0;
padding-top: 0;
}
.contenedor .pieces {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
.pieces{
width: 340px;
height: 340px;
position: absolute;
z-index: 100;
-webkit-transition: all 0.6s cubic-bezier(0.58, -0.55, 0.265, 1.45);
-ms-transition: all 0.6s cubic-bezier(0.58, -0.55, 0.265, 1.45);
-moz-transition: all 0.6s cubic-bezier(0.58, -0.55, 0.265, 1.45);
transition: all 0.6s cubic-bezier(0.58, -0.55, 0.265, 1.45);
perspective: 1000;
}
#piece-1{
top: 0;
left: 0;
background: url(http://piersrueb.com/puzzle/img/puzzle-1.jpg);
}
#piece-2{
top: 0;
left: 340px;
background: url(http://piersrueb.com/puzzle/img/puzzle-2.jpg);
}
#piece-3{
top: 0;
left: 680px;
background: url(http://piersrueb.com/puzzle/img/puzzle-3.jpg);
}
#piece-4{
top: 340px;
left: 0;
background: url(http://piersrueb.com/puzzle/img/puzzle-4.jpg);
}
#piece-5{
top: 340px;
left: 340px;
background: url(http://piersrueb.com/puzzle/img/puzzle-5.jpg);
}
#piece-6{
top: 340px;
left: 680px;
background: url(http://piersrueb.com/puzzle/img/puzzle-6.jpg);
}
p{
margin: 20px auto;
width: 1020px;
text-align: center;
}
.glow{
z-index: 101;
-webkit-box-shadow: 0px 0px 6px 0px #000000;
box-shadow: 0px 0px 6px 0px #000000;
transform: scale(1.1);
}
@-webkit-keyframes animate-guage {
0% { transform: scale(1.04); }
50% { transform: scale(1.06); }
100% { transform: scale(1.04); }
}
.glow-2{ -webkit-transform: rotateX(360deg); }
@-webkit-keyframes animate-guage-2 {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
