Spinning cards in Bootstrap 4

Currently working on my own card design using Bootstrap v4, specifically utilizing rows and columns. Encountering an issue when attempting to stack the two sides of the card on top of each other. I have tried using position: absolute; but they disappear completely.

.thecard {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
}

.thecard__side {
  background-color: orangered;
  color: #fff;
  font-size: 2rem;
  height: 50rem;
  transition: all .8s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
}

.thecard__side--front {
  background-color: orangered;
}

.thecard__side--back {
  background-color: green;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.thecard:hover .thecard__side--front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.thecard:hover .thecard__side--back {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
<div class="row mt-5">
  <div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
    <div class="thecard">
      <div class="thecard__side thecard__side--front">
        Front
      </div>
      <div class="thecard__side thecard__side--back">
        Back
      </div>
    </div>
  </div>
  <div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
    <div class="thecard">
      <div class="thecard__side thecard__side--front">
        Front
      </div>
      <div class="thecard__side thecard__side--back">
        Back
      </div>
    </div>
  </div>
  <div class=" offset-md-3 mt-5 mt-lg-0 offset-lg-0 col-md-6 col-lg-4">
    <div class="thecard">
      <div class="thecard__side thecard__side--front">
        Front
      </div>
      <div class="thecard__side thecard__side--back">
        Back
      </div>
    </div>
  </div>
</div>

Seeking suggestions for this issue. Any solutions, guys?

htmlcssbootstrap-4

Answer №1

After conducting numerous tests, I found that setting the same height for both of these classes resolved the issue for me: 

 .thecard {
      perspective: 150rem;
      -moz-perspective: 150rem;
      position: relative;
      height: 50rem; 
    }

    .thecard__side {
      background-color: orangered;
      color: #fff;
      font-size: 2rem;
      height: 50rem;
      transition: all .8s;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      backface-visibility: hidden;
    }

Answer №2

Give This Code a Shot

.thecard {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 350px;
}

.thecard__side {
  background-color: orangered;
  color: #fff;
  font-size: 2rem;
  height: 50rem;
  transition: all .8s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
}

.thecard__side--front {
  background-color: orangered;
}

.thecard__side--back {
  background-color: green;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.thecard:hover .thecard__side--front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.thecard:hover .thecard__side--back {
  -webkit-transform: rotateY(0);
  transform: rotateY(0);
}
<div class="row mt-5">
  <div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
    <div class="thecard">
      <div class="thecard__side thecard__side--front">
        Front
      </div>
      <div class="thecard__side thecard__side--back">
        Back
      </div>
    </div>
  </div>
  <div class="mt-5 mt-lg-0 col-md-6 col-lg-4">
    <div class="thecard">
      <div class="thecard__side thecard__side--front">
        Front
      </div>
      <div class="thecard__side thecard__side--back">
        Back
      </div>
    </div>
  </div>
  <div class=" offset-md-3 mt-5 mt-lg-0 offset-lg-0 col-md-6 col-lg-4">
    <div class="thecard">
      <div class="thecard__side thecard__side--front">
        Front
      </div>
      <div class="thecard__side thecard__side--back">
        Back
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I make a dropdown menu appear when I select a checkbox?

Is it possible to have a dropdown menu with changing options appear when I click on a checkbox using HTML and JavaScript? I have experimented with some code snippets in JavaScript as a beginner, but I am unsure if they are needed here. Is there an altern ...

javascriptphphtml

Looking to transform an HTML table into a stylish CSS layout complete with a form submission button?

Recently, I've been delving into the world of CSS and PHP as I work on converting old code entirely into HTML and PHP with a touch of CSS. The visual aspect seems fine, but I've hit a roadblock with the submit form due to an IF statement in PHP. ...

javascriptphpjqueryhtmlcss

Ways to rearrange div elements using JavaScript

I need assistance with reordering div elements using JavaScript, as I am unsure of how to accomplish this task. Specifically, I have two divs implemented in HTML, and I would like the div with id="navigation" to appear after the div with class="row subhea ...

javascriptjquerycss

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Are there any jQuery plugins available that can display a loader image while a page is loading?

After extensive research on Google, I have been unable to find the plugin I need. If you are aware of any suitable plugins, please let me know. Thank you in advance! ...

javascriptjqueryhtml

Challenges with iFrame Resizing on Internet Explorer

After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...

cssinternet-exploreriframeinternet-explorer-8scale

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

javascriptcsstwitter-bootstrapbootstrap-4choices.js

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax

Issues with Skrollr JS on mobile device causing scrolling problem

Currently facing an issue with Skrollr js. It is functioning perfectly in web browsers and mobile devices. However, there seems to be a problem when tapping on a menu or scrolling down arrow as it does not initiate scrolling. Assistance would be greatly ...

javascripthtmlskrollr

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

javascripthtmlreactjstypescriptwebpack

What is the best way to dynamically assign a value to an anchor tag upon each click using jQuery?

How can I pass a value to an anchor tag on every click using jQuery? I am encountering an issue with my current code where the value is not being retrieved when I click the button. //HTML snippet <button id="a-selectNm" data-a_name="<?php echo $row[ ...

javascriptphpjqueryhtml

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

javascripthtmlcssangular6

Design a dynamic card with an eye-catching Font Awesome icon that adapts well to

As I delve into the realm of CSS, my current mission is to replicate the captivating cards showcased on this particular website. Utilizing Font Awesome icons has become a pivotal aspect of this endeavor. For instance, let's take a look at this card:ht ...

htmlcssbootstrap-4font-awesome

What is the reason for the ul selector not functioning in the attached CSS file?

I attempted to create a navigation bar by using the code below. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="background"> <ul> <li>Home</li> <li>Ne ...

csshtmlcss-selectors

What is the best way to hide the drop down menu after it has been opened by clicking on the same element

My attempt to create a code that toggles a drop-down menu on every click and closes any other open menus is not working as expected. The menu doesn't close upon clicking it again. $(document).ready(function(){ "use strict"; $(".dropdown").hi ...

jqueryhtmlcssdrop-down-menu

Can someone explain the significance of this CSS code (specifically regarding font-size division)?

Forgive me, but I'm struggling to come up with a more suitable title for my query. I've come across this piece of code font: 9pt/18px Tahoma; Can anyone shed some light on what it signifies? ...

css

Tips for expanding an input field to span across two td elements

I am attempting to design a simple form. The issue I am encountering involves creating an input field that spans two td's in the second row of my table. Despite using the colspan="2" attribute within the td tag, the input field does not expand over tw ...

htmlcssinputhtml-table

The parent div isn't properly extending to accommodate the table, and the columns aren't aligning correctly within the table when using CSS flexbox

I have a scenario where I need a table inside a div to take up the entire space of the div, with the second column and its inputs expanding as much as possible to fill the width (i.e. col1+col2 = div width). Due to being nested within another div, absolut ...

htmlcsshtml-tableflexbox

Creating CSS styles to ensure text takes up the largest size possible without wrapping or extending beyond the screen borders

Looking for a way to display text at its maximum size without any wrapping or overflowing the screen? I attempted using @media and adjusting font-size, but things got too complex. My goal is to have the text on example.com displayed at the largest possible ...

htmlcssmaxfont-size

Delete an entry from the localStorage

I am attempting to create a basic To-Do list using jQuery, but I have encountered an issue. This is my first time utilizing localStorage. After setting up the structure for my To-Do list, I wanted the items to remain visible when I refresh the page. Initia ...

javascriptjqueryhtmllocal-storage