Home / Questions / 250224
Accepted
Fernanda
Asked: 2020-03-31 02:15:30 +0800 CST 2020-03-31 02:15:30 +0800 CST

How to avoid double display when rotating a div?

  • 772

I have a menu that rotates the sections so that the user has a brief review of what he will find if he enters that page. So far so good. The problem occurs (in some browsers) when it returns to the original state because both sides (front and back) are displayed when you move the mouse over it and it looks horrible. Is there any way to correct this? I pass the code so you can see what I have. Thank you

.cajaMenu {
  width: 49%;
  height: 230px;
  margin-bottom: 5px;
  text-align: center;
  color: #808080;
  background: #fff;
  position: relative;
  perspective: 1000px;
  display: inline-block;
}

.cajaMenu:hover .botonMenu {
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
}

.botonMenu {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 1.2s linear;
  width: 100%;
}


/*--texto frente--*/

.frente {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
}

.cajaMenu .botonMenu .frente h2 {
  display: block;
  padding: 15px 0;
  text-align: center;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
}


/*--icono seccion frente--*/

.cajaMenu .botonMenu .frente h2:before {
  font-family: 'icomoon';
  font-size: 4rem;
  position: relative;
  left: 0px;
  top: 0px;
  font-weight: normal;
}

.cajaMenu .botonMenu .frente h2#hacemos:before {
  content: '\e915';
}

.cajaMenu .botonMenu .frente h2#adaptable:before {
  content: '\e900';
}


/*--revez de cada seccion--*/

.cajaMenu .botonMenu .revez {
  transform: rotateY(180deg);
  font-size: .65em;
  cursor: pointer;
  background: #f4f4f4;
}

.cajaMenu .botonMenu .revez a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5px;
  right: 0;
  cursor: pointer;
  text-align: justify;
  hyphens: auto;
  color: #000;
  text-decoration: none;
  line-height: 1.4em;
}


/*--titulo revez del div--*/

.cajaMenu .botonMenu .revez h3 {
  padding: 3px 0;
}


/*--texto revez del div--*/

.cajaMenu .botonMenu .revez p {
  padding: 3px 0;
}


/*--boton "ver mas" revez del div--*/

.cajaMenu .botonMenu .revez h4 {
  color: #fb700d;
  position: absolute;
  bottom: 15px;
  right: 5px;
}
<nav id="seccion">
  <div class="cajaMenu">
    <div class="botonMenu">
      <div class="frente">
        <h2 id="hacemos"></h2>
        <h2>Que hacemos?</h2>
      </div>
      <div class="frente revez" id='meta'>
        <a href="nuestra_meta.php">
          <h3>No sabes por donde empezar...</h3>
          <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy de una manera sencilla. Conectarte con tus clientes, y brindales lo que necesitan desde donde sea que se encuentren.</p>

          <h4>Ver más +</h4>
        </a>
      </div>
    </div>
  </div>
  <div class="cajaMenu">
    <div class="botonMenu">
      <div class="frente">
        <h2 id="adaptable"></h2>
        <h2>Diseños adaptables</h2>
      </div>
      <div class="introMenu frente revez" id='responsive'>
        <a href="diseno_responsive.php">
          <h3>Nuevas formas de conectarse...</h3>
          <p>Los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera.</p>
          <p>TIMON DIGITAL crea tu web adaptable a todos los formatos de pantalla. Para que tus clientes puedan sacar el máximo partido de tu negocio.</p>
          <h4>Ver más +</h4>
        </a>
      </div>
    </div>
  </div>
</nav>

html5

1 Answers

  1. Best Answer

    Updated

    I have updated the answer as my colleague @blonfu has told me that it did not look good Firefoxin Chrome.

    The problem came from the heights that were given to the element .frente: height: 100%which was lost when it returned to its initial state.

    Changing that height to the height of the parent .cajaMenu(230px) now displays correctly in Chrome, FireFox and Safari browsers, thus preserving the property of the backface-visibility: hidden. 

    .cajaMenu {
  width: 49%;
  height: 230px;
  margin-bottom: 5px;
  text-align: center;
  color: #808080;
  background: #fff;
  position: relative;
  perspective: 1000px;
  display: inline-block;
}

.cajaMenu:hover .botonMenu {
  transform: rotateY(180deg);
  /*
  width: 100%;
  height: 100%;
  */
}

.botonMenu {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: all 1.2s linear;
  width: 100%;
}


/*--texto frente--*/

.frente {
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 230px; /* !!!!! Aquí estaba el error */
}

.cajaMenu .botonMenu .frente h2 {
  display: block;
  padding: 15px 0;
  text-align: center;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
}


/*--icono seccion frente--*/

.cajaMenu .botonMenu .frente h2:before {
  font-family: 'icomoon';
  font-size: 4rem;  
  /* Aquí hay problema con el navegador Safari
  position: relative;
  left: 0;
  top: 0;
  */
  font-weight: normal;
}

.cajaMenu .botonMenu .frente h2#hacemos:before {
  content: 'icon 1';
}

.cajaMenu .botonMenu .frente h2#adaptable:before {
  content: 'icon 2';
}


/*--revez de cada seccion--*/

.cajaMenu .botonMenu .revez {
  transform: rotateY(180deg);
  font-size: .65em;
  cursor: pointer;
  background: #f4f4f4;
}

.cajaMenu .botonMenu .revez a {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5px;
  right: 0;
  cursor: pointer;
  text-align: justify;
  hyphens: auto;
  color: #000;
  text-decoration: none;
  line-height: 1.4em;
}


/*--titulo revez del div--*/

.cajaMenu .botonMenu .revez h3 {
  padding: 3px 0;
}


/*--texto revez del div--*/

.cajaMenu .botonMenu .revez p {
  padding: 3px 0;
}


/*--boton "ver mas" revez del div--*/

.cajaMenu .botonMenu .revez h4 {
  color: #fb700d;
  position: absolute;
  bottom: 15px;
  right: 5px;
}
    <nav id="seccion">
  <div class="cajaMenu">
    <div class="botonMenu">
      <div class="frente">
        <h2 id="hacemos"></h2>
        <h2>Que hacemos?</h2>
      </div>
      <div class="frente revez" id='meta'>
        <a href="nuestra_meta.php">
          <h3>No sabes por donde empezar...</h3>
          <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy de una manera sencilla. Conectarte con tus clientes, y brindales lo que necesitan desde donde sea que se encuentren.</p>

          <h4>Ver más +</h4>
        </a>
      </div>
    </div>
  </div>
  <div class="cajaMenu">
    <div class="botonMenu">
      <div class="frente">
        <h2 id="adaptable"></h2>
        <h2>Diseños adaptables</h2>
      </div>
      <div class="introMenu frente revez" id='responsive'>
        <a href="diseno_responsive.php">
          <h3>Nuevas formas de conectarse...</h3>
          <p>Los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera.</p>
          <p>TIMON DIGITAL crea tu web adaptable a todos los formatos de pantalla. Para que tus clientes puedan sacar el máximo partido de tu negocio.</p>
          <h4>Ver más +</h4>
        </a>
      </div>
    </div>
  </div>
</nav>

    • 3