1.

How to style hyperlinks which are relative or internal to a webpage?

Answer»

The visibility of the div during 3d transform can be managed via backface-visibility:hidden This property set the visibility as whether to show or HIDE the back face of an ELEMENT during 3d transform.

Example from code:

  • HTML
<div class='container'>   <div class="card"> <div class="face front">    See </div> <div class="face back">    SAW </div>   </div> </div> .container {   position: relative;   margin: 12px 24px;   font-family:  system-ui, -apple-system, Arial, Helvetica, Trebuchet MS; }
  • CSS
.card {   width: 200px;   height: 50px;   position: relative;   transform-style: preserve-3d;   transition: 0.5s; } .container:hover .card {   transform: rotateY(180deg); } .face {   position: absolute;   backface-visibility: hidden;   top: 0;   left: 0;   width: 100%;   height: 100%;   COLOR: white;   line-height: 50px;   text-align: center;   border-radius:5px; } .front {   background: DodgerBlue;   z-index: 10; } .back {   transform: rotateY(180deg);   background: SlateBlue; } .container:hover .front {   z-index: 0; }


Discussion

No Comment Found

Related InterviewSolutions