1

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

1
  • intente con posicion relativa,mirando si con los display cambia la posicion pero no..no sale erro solo que siguen saliendo como columna
    – fabrixo96
    el 18 abr. 2020 a las 23:32

1 respuesta 1

1

Alcanza con hacer lo siguiente para evitar mover el código del ejercicio de tu profesor:

  • Crea un section con la clase .contenedor y dentro de este mueve todo tu HTML
  • En el CSS aplica un display de tipo flex para lograr que los elementos se mueven sobre el eje horizontal y queden uno a lado del otro

Es decir:

<section class="contenedor">
    .......resto de tu HTML
</section>

Y en tu CSS

.contenedor {
    display: flex;
}

Ahora tu ejercicio completo:

    <style>
      .contenedor {
        display: flex;
      }
    .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;
       }
    </style>
    <section class="contenedor">
      <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>
    </section>

Referencia

1
  • Correcto si sirvio,muchas gracias
    – fabrixo96
    el 19 abr. 2020 a las 0:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.