Card flipping functionality is not functional on Internet Explorer browsers (versions 11, 10, and below)

After coming across a tutorial on CSS3 transform by David Desandro, I tried implementing the code but unfortunately, it does not work in Internet Explorer...

I noticed that clicking "flip" only results in Card 1 being displayed while card 2 remains hidden. Does anyone have insights into what's causing this issue and possibly a solution?

Below is the code snippet used for achieving this effect:

.container {
  width: 200px;
  height: 260px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: right center;
     -moz-transform-origin: right center;
       -o-transform-origin: right center;
          transform-origin: right center;
}

#card.flipped {
  -webkit-transform: translateX( -100% ) rotateY( -180deg );
     -moz-transform: translateX( -100% ) rotateY( -180deg );
       -o-transform: translateX( -100% ) rotateY( -180deg );
          transform: translateX( -100% ) rotateY( -180deg );
}

#card figure {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

#card .front {
  background: red;
}

#card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

Answer №1

Currently, Internet Explorer does not support the CSS transform property 'preserve-3d', causing the demo to malfunction. However, there is development underway for 'preserve-3D' to be included as a feature in the future.

To learn more about Preserve-3D, visit: http://www.w3.org/TR/css3-transforms/#transform-style-property

If you want to stay updated on other features that the IE team is currently working on, you can refer to:

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

Center text within CSS shapes

.myButton { float: right; border-top: 40px solid pink; border-left: 40px solid transparent; border-right: 0px solid transparent; width: 25%; } <div class="myButton"> Submit </div> This snippet is the code I have written to create a ...

Utilizing the after pseudo element for an active selector in CSS

I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...

Space between elements in a horizontal arrangement

While working with Bootstrap 5 and using paddings in columns, I encountered issues when some of my columns had backgrounds or when adding an embed element. How can I create margins in such cases? https://i.sstatic.net/EhF7y.png To address this issue, I i ...

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

I am currently working on creating a div that contains some information, similar to the layout used on the Coinbase website. However, I am encountering issues with styling as I want this div to be responsive - horizontally aligned on larger devices and ver ...

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

Creating a Div element to occupy an entire row is a simple task that can be achieved

Seeking a solution to automatically generate a DIV when our products do not fill up the entire row, using the MixItUp jQuery filter and sort plugin. Is there a JavaScript code that can detect the empty space in a row and create the necessary div to mainta ...

Center an element on the screen by dynamically adjusting its position according to the media query

As I work on creating a responsive website that can adapt to screens of various devices, I am facing a challenge. Each device has a different number of pixels, making it difficult to centrally position a div dynamically. Currently, I am using margin-left: ...

Using CSS GRID for creating layouts with customized grid-template-areas that include empty cells and automatic placement

Struggling with implementing the css grid layout module to showcase a 12-column, 3-row grid. The initial row should only contain two elements, positioned on each side of the grid with empty cells in between using ten periods. Subsequent rows should autom ...

Eliminating the need for the horizontal scroll bar on the webpage

I'm dealing with a page that has multiple controls. Initially, there is no horizontal scrollbar on the page. However, as soon as I introduce an AjaxControlToolkit.Editor or a treeview onto the page, a horizontal scroll bar mysteriously appears. For ...

Is it possible to rearrange the order of rows and columns based on the viewport size?

Is it possible to achieve two different layouts with Bootstrap 5 based on the viewport size? I want to avoid using display:none and JS/Jquery tricks if possible. I attempted to accomplish this by utilizing Bootstrap 5 tools, but encountered issues on lar ...

Tips for preventing CSS animation from reverting back to its initial position

After transforming 2 div tags into blocks, I created a code that causes the blocks to move outwards. The issue I'm facing is that they return to their original position after moving. I want the two blocks in the animation to move out to the sides and ...

Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website: Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn ...

Personalized modify and remove elements on a row of the DataGrid material-ui version 5 component when hovered over

In my React Js app, I am utilizing Material UI components or MUI v5 as the UI library for my project. Within the DataGrid/DataGridPro component, I am implementing a custom edit and delete row feature. The requirement is to display edit and delete icons w ...

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

For those wanting to add an embedded Soundcloud player on a blog: <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_p ...

How can CSS files be shared among multiple projects within Visual Studio 2012?

I am working on a Visual Studio Project Solution that includes 3 separate projects. To streamline the process and avoid duplication, I aim to have a shared CSS file for all 3 projects since they all follow the same CSS rules. Despite trying the Add As Lin ...

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

What causes the alignment of text to be overridden by the presence of a floating element?

https://jsfiddle.net/u0Ltgh3e/68/ .text { width: 50%; text-align: justify; } I am currently developing a custom formatting tool for a specific purpose and I am attempting to create a two-column layout similar to the one demonstrated in this Jsfiddle l ...

Problem with icon color not being applied to lightning-tab component in LWC

.html <lightning-tabset variant="vertical" > <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1"> demo label1 </lightning-tab> <lightning-tab class=" ...

Don't waste time creating multiple popups for changing content - streamline your process

Challenge I've successfully extracted information from an array and displayed it dynamically in a tooltip/popup window above each photo on the page. However, with 56 different individuals at various locations, arranging them neatly in a grid poses a ...

Please disable zoom functionality on the website specifically for Android devices

Is there a way to disable the zoom feature on our website specifically for Android phones/devices without affecting iPhones? Perhaps targeting the Chrome browser on Android would be sufficient, but we should also verify the mobile screen size. ...