Me encontré con este problema en el que estoy tratando de rotar este div al pasar el mouse, pero cuando muevo el mouse, intenta flotar pero luego vuelve a la posición normal. ¿Podrias ayudarme por favor? aquí está mi violín: https://jsfiddle.net/Lcb7okfn/

.section-tours{
  background-color:pink;
  padding:5rem 0 50rem 0;

}
.center-text{
  background-color:blue;
  padding:30px 0;

}

.col-1-of-3{
  width: calc((100%-20px)/3);

  }

.card{
  background-color: orange;
  height:15rem;
  transition: all .8s;
  perspective: 1000px;
  -moz-perspective: 1000px;
}
    .card:hover{
      transform: rotateY(180deg); 
}
0
giovita0206 31 ago. 2020 a las 21:54

1 respuesta

La mejor respuesta

Aplique el hover a un elemento padre y también mueva la declaración de perspectiva al padre:

.section-tours {
  background-color: pink;
  padding: 5rem 0 50rem 0;
}

.center-text {
  background-color: blue;
  padding: 30px 0;
}

h2 {
  padding: 0;
  margin: 0;
}

.col-1-of-3 {
  width: calc((100%-20px)/3);
  perspective: 1000px;
}

.card {
  background-color: orange;
  height: 15rem;
  transition: all .8s;
}

.col-1-of-3:hover .card {
  transform: rotateY(180deg);
}
<section class="section-tours">
  <div class="center-text">
    <h2>
      Most popular tours
    </h2>
  </div>
  <div class="row">
    <div class="col-1-of-3">
      <div class="card">
        <div class="card class_side">
          TEXT
        </div>

      </div>
    </div>
    <div class="col-1-of-3">

    </div>
    <div class="col-1-of-3">

    </div>
  </div>
</section>
0
Temani Afif 31 ago. 2020 a las 19:00