Problem with Internet Explorer version 9 and above and the Flip Card feature

I have a cool feature for one of my clients where clicking on one div causes another div to flip in its place, like a card flipping over. It's kind of like those portfolio image flippers, but instead of images, it flips divs with content inside.

How can I make this work in IE since it uses preserve-3d animation?

You can see a live example here.

Here is the code:


$(".cc").click(function(){$(this).toggleClass("active")});



.cc {
    position: relative;
    width: 90%;
    height: 325px;
    z-index: 1;
    margin: 0 auto;
    -ms-perspective: 1000;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.c {
    width: 100%;
    height: 100%;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
}

... (code continued)

Edit: I've managed to add support for IE10+ in my answer below. However, IE9 has proven to be quite troublesome and I'm out of ideas. If anyone else can figure out how to make it work in IE9, that would be amazing. Otherwise, consider this question solved with the solution provided. Thank you.

jqueryhtmlcssinternet-explorer

Answer №1

It's unclear to me what you mean by saying you included "support" for it. Internet Explorer simply does not have the capability for this kind of animation.

Answer №2

After numerous revisions and extensive testing, I eventually discovered a solution although it deviated significantly from the original code.

Experience it live: Explore here

Try it out on Fiddle: Access Here

The Code:

        function() {
            function n(n) {
                n.addEventListener("click", function() {
                    var n = this.classList;
                    n.contains("flipped") === !0 ? n.remove("flipped") : n.add("flipped")
                })
            }
            for (var o = document.querySelectorAll(".c.click"), e = 0, i = o.length; i > e; e++) {
                var l = o[e];
                n(l)
            }
        }();
.c {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: 200px;
    color: #fff;
}

.cb,.cf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.cf {
    background-color: #800605;
}

.cb {
    background-color: #000;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.cf h2 {
    font-size: 2em;
    padding: 100px 20px;
}

.cb p {
    font-size: .75em;
    padding: 100px 20px;
    text-align: center;
}

.c.click.flipped .cf {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.c.click.flipped .cb {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c click">
   <div class="cf">
       <h2> Fact 1 </h2>
   </div>
   <div class="cb">
          <p> Internet Explorer needs to just die off already. </p>
   </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

Spacing between the rows of a table

I am seeking to achieve a unique visual style for the rows in my table, similar to the one shown below. I attempted to use CSS border properties in the code snippet provided but desire more spacing between each row with a thin border and sharp edges. .dat ...

cssangularbootstrap-4ngx-datatableborder-spacing

Jquery scripts seem to have a hit-or-miss success rate

Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...

javascriptjqueryhtmlcss

What is the counterpart of `width: max(100%, fit-content)`?

In order for my div to adjust its size based on the content if the parent div is smaller than the content, and match the size of the parent otherwise, I have been trying to achieve the first scenario by using width: fit-content, and the second scenar ...

css

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...

htmlcssangularng-zorro-antd

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

I am currently facing an issue with bringing the toolbar to the forefront of the page. When I scroll down, the elements on the page end up covering the toolbar which is not the desired behavior. Below is the CSS code for the toolbar: .maintoolbar.mat-tool ...

htmlcssangularangular-material

Unable to view a basic bottle webpage on Raspberry Pi from a PC

After referencing the instructions found at , I successfully tested them on a Raspberry Pi using the following code snippet: from bottle import route, run @route('/hello') def hello(): return "Hello World!" run(host='0.0.0.0', port ...

pythonraspberry-pihtmlraspbianbottle

Frequently encountering broken styles in Magento 1.9 due to missing CSS and JS files

Recently, I've been facing frequent style breaking issues on my Magento sites (1.9.2+). This results in the home page displaying only text with missing CSS, JS, and images. To fix this problem, I usually clear the cache by deleting the var/cache fold ...

cssmagentocachingstyles

Preventing jquery from continuing its execution after an event has been successfully handled

I am experiencing an issue with a radio button that triggers a jQuery script upon clicking. The script is supposed to render a form where users can enter a comment. Everything seems to be working fine, the event is detected and the form is rendered, but wh ...

jqueryhtmlajax

Choose the initial full text that corresponds with a portion of the text

I am currently working on a page with multiple <string> tags containing different strings, like 'Is this a String?  Yes'. My goal is to use JQuery to locate the first instance of 'Is this a String?  ' and extract either ...

javascriptjquerystring

Tips on choosing JSON data to show on an HTML page

I am working with JSON data from a specific URL and I need to display only the information related to France on an HTML page. However, I am unsure of how to achieve this. Can someone please assist me? Here is my JavaScript code: // API Fetch Call const ...

javascripthtmljsonapi

What is the best way to line up a number and text using CSS?

Creating a basic gauge meter with min value 0 and max value 2. The current UI progress is as follows: .sc-gauge { width:200px; height:200px; margin:200px auto; } .sc-background { position:relative; height:100px; margin-bottom:10px; background-color:g ...

htmlcsscharts

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

I have been struggling with aligning radio buttons to match the alignment of the form's text boxes. I've experimented with various solutions recommended on this site, as well as others and YouTube. However, the most helpful resource I found was: ...

htmlcssradio-buttonalignment

What is the best way to manage the 'content' attribute in TSX?

I'm currently developing an application that utilizes schema.org. In the code snippet below, you can see how I've implemented it: <span itemProp="priceCurrency" content="EUR">€</span> According to schema.org do ...

javascripthtmltypescriptschema.orgtsx

What is the best way to determine if an image already exists in a database where the objects are spread across two distinct SQL tables?

Currently, I am working on a project using classic ASP and SQL. In this project, I have an input box where the image name is entered by the user after clicking the "Update" button. Upon clicking the update button, pre-existing images are displayed in a tab ...

htmlsql-serverasp-classic

Unable to input information into Textbox in real-time

Having trouble entering data from one page to another using ng-model. After filling in some information in a textbox and moving to the next page, I want the same data to be entered when I return to the previous page. I've written the code but it doesn ...

javascripthtmlangularjs

Dynamic loading of XML data into a DIV when hovering over it

The main idea behind my project is quite simple. I have a grid of company logos extracted from an XML document using XSLT, each logo with its own unique link to the respective company profile. On the same page, I have a separate div that serves as a "prev ...

javascriptjqueryxmlajax

What techniques can I use to streamline this jQuery script?

Presented below is the code for a straightforward newsletter signup widget. I believe there's potential to streamline it further, any suggestions? const emailForm = $('.widget_subscribe form'); const emailSubmit = $('.widget_subscrib ...

javascriptjquery

Exploring JSON object lists with JQuery in a Map created using Scala Play 2.0

In my Play Controller, I have the following Scala code (simplified for brevity): object Sample { def apply(someArgToBeUsedLater: String) = { val success = Map("foo" -> List("Things", "Stuff", "Test")) Ok(Json.toJson(success)).a ...

jqueryjsonscalaplayframeworkplayframework-2.0

Trouble with toggling div visibility using jQuery and AJAX

I'm trying to display a specific div based on the result of an SQL query. The problem I'm facing is that I can't seem to toggle the divs asynchronously. Currently, the page needs to be reloaded for the div to reflect the changes. <?ph ...

phpjavascriptjqueryajax

Mastering the art of incorporating background image transitions and creating a seamless slider for navigation

Is there a way to create a navigation menu like the one on this theme? On this theme, when you hover over a menu item, the background image smoothly moves left or right to the item you are hovering on. If anyone knows of plugins that can achieve this eff ...

javascriptjquerycss