Support Center Visit Demo License manager Buy @ envato

Flip Boxes?

FlexQubeFlexQube
in BeBuilder
Hi, 

Do you guys have flip boxes that I could use on my pages? I really like this feature, similar to what is here:


Any help would be awesome!

Comments

  • BryanBryan
    Hi,
    we do not have a flip effect, just a image switch on hover in the image item.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • Brunno299Brunno299
    flip box code

    .flip-box {
      background-color: transparent;
      width: 300px;
      height: 200px;
      border: 1px solid #f1f1f1;
      perspective: 1000px;
    }

    .flip-box-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-box:hover .flip-box-inner {
      transform: rotateX(180deg);
    }

    .flip-box-front, .flip-box-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .flip-box-front {
      background-color: #bbb;
      color: black;
    }

    .flip-box-back {
      background-color: dodgerblue;
      color: white;
      transform: rotateX(180deg);
    }
    </style>
    </head>
    <body>

    <h1>3D Flip Box (Vertical)</h1>
    <h3>Hover over the box below:</h3>

    <div class="flip-box">
      <div class="flip-box-inner">
        <div class="flip-box-front">
          <h2>Front Side</h2>
        </div>
        <div class="flip-box-back">
          <h2>Back Side</h2>
        </div>
      </div>
    </div>
    but ins´t responsive 
Sign In or Register to comment.