los card estan de forma vertical pero Quiero ponerlos de forma horizontal estos dos , pero no lo logro.-el ejercicio es de un profesor por lo cual no lo hice yo , quiero complemetarlo arreglando eso gracias
Este es el Html
<div class="viewport">
<div class="flip-card">
<div class="card-front">
<p>Código: CA-01 <br>
Fecha Captura: 6/09/2020
</p>
<img class="residuo" src="img/img1.png">
</div>
<div class="card-back">
<p>Clasificación: Metal </p>
<img src="img/bote2.png">
</div>
</div>
</div>
<div class="viewport">
<div class="flip-card">
<div class="card-front">
<p>Código: CA-02 <br>
Fecha Captura: 6/09/2020
</p>
<img class="residuo" src="img/img1.png">
</div>
<div class="card-back">
<p>Clasificación: otro </p>
<img src="img/bote3.png">
</div>
</div>
</div>
-----------este es el css(los card tienen rotacion por lo que el css es largo)-------------------intente cambiando las posiciones pero no tengo idea,gracias
.flip-card {
display: block;
position: relative;
z-index: 1000;
width: 250px;
height: 330px;
}
.flip-card .card-front,
.flip-card .card-back {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 500ms;
-o-transition: -o-transform 500ms;
-webkit-transition: -webkit-transform 500ms;
transition: transform 500ms;
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.flip-card .card-front {
-moz-transform: perspective(300) rotateY(0);
-webkit-transform: perspective(300) rotateY(0);
transform: perspective(300) rotateY(0);
z-index: 900;
}
.flip-card .card-back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 800;
}
.flip-card:hover .card-front {
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-moz-transform: perspective(300) rotateY(180deg);
-webkit-transform: perspective(300) rotateY(180deg);
transform: perspective(300) rotateY(180deg);
}
.flip-card:hover .card-back {
z-index: 950;
transform: rotateY(0deg);
transform: perspective(300) rotateY(0deg);
}
/*** Just for show... ***/
.flip-card {
color: #000;
cursor: pointer;
float: left;
font-weight: bold;
margin: 10px;
text-align: center;
text-transform: uppercase;
min-width: 100px;
max-width: 400px;
}
.flip-card .card-front,
.flip-card .card-back {
border-radius: 10px;
box-shadow: 1px 1px 2px rgba(14, 85, 143, 0.8);
box-sizing: border-box;
padding: 40px 0;
}
.flip-card .card-front {
box-shadow: 0 0 20px rgba(115, 113, 113, 0.94) inset;
box-sizing: border-box;
background-color: #fff;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF499BEA',
endColorstr='#FF207CE5');
background-size: 100%;
}
.flip-card .card-back {
box-shadow: 0 0 20px rgba(115, 113, 113, 0.94) inset;
background-color: #fff;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF478CE0',
endColorstr='#FF0263DB');
background-size: 100%;
}
body {
}
.viewport {
margin: 10px auto 0;
width: 500px;
}
.flip-card .card-front img {
margin-top: 30px;
}
intente con posicion relativa,mirando si con los display cambia la posicion pero no..no sale erro solo que siguen saliendo como columna