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

Adjustable pseudo-elements derived from the size of the element

I have a unique feature in my web application that involves a span element with inner text and additional :before and :after pseudo-elements used as decorative lines on each side of the text. Check out this JSFiddle example to see exactly what I mean. .c ...

jqueryhtmlcsscss-selectorspseudo-element

What is the reason for the presence of additional space below when using x-overflow:hidden?

When I place two spans inside each other and use overflow-x:hidden on the inner span, it results in extra space below the inner span. Why does this happen? <span style="" class="yavbc-color-tip"><span style="">Some text</span></span&g ...

htmlcssoverflow

Creating a simple bootstrap code for developing plugins in Wordpress

After successfully coding in Brackets with the Theseus plugin on my local machine, I encountered a problem when attempting to transfer my code to a Wordpress installation. The transition from Brackets to Wordpress seems far more complicated than expected. ...

javascriptphpcsswordpressplugins

Seeking a precise placement, must find a CSS-only answer

After spending two days experimenting with different CSS styles like absolute positioning, inline/inline-block display, and flex display, I have yet to find a solution for styling a timestamp's label position using pure CSS. https://i.stack.imgur.com ...

htmlcsspositioncss-positionpure-css

The CSS styling in Internet Explorer 11 is causing cells to merge into the same column in a table

In my CSS-styled form that resembles a table, the two input elements are displaying on top of each other instead of side by side. How can I adjust them to appear next to each other? There is a possibility that this issue could be browser-specific. The for ...

htmlcssinternet-explorer

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

Having trouble getting the jQuery/JS redirect button to function properly

I'm fairly new to working with jQuery. My current challenge involves unsetting a cookie and then navigating to the next page. There are numerous resources discussing this topic online, but what seemed like a simple task has turned into a two-hour hea ...

javascriptjqueryhttp-redirect

Troubleshooting issue with Django forms and JavaScript interactions

For the past day, I've been grappling with a particular issue and haven't made much progress. My setup involves using a django inline form-set, which displays all previously saved forms along with an additional empty form. To show or hide these f ...

javascriptjquerydjangovalidationdjango-forms

What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality b ...

htmlcssreactjsnavbar

Updated INNER header and footer - unrelated to the answered questions

After observing, the inner-header and inner-footer div scroll along with the area that contains the select list. How can I make that area scroll down while keeping the inner-header/footer fixed within the content? I hope my query is understandable. Thank ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

What is the best way to apply CSS to my HTML code?

I have the files stored within my Django project. My directory structure for templates looks like this: |base.html | |rules | |style_base.css In my base.html file, I link to the stylesheet like this: <link type="text/css" href="/rules/style_b ...

htmlcssdjango

step by step guide on swapping a portion of a JSON string

I need to eliminate the character "C" from keys that start with C_ in the following JSON string. Here is the JavaScript object I have: var jsonData= { key1:val1, key2:val2, C_100:1, C_101:2, C_102:3, } The desired output should look like this: v ...

javascriptjqueryjsonregexreplace

Tips for serializing a form using ajax for database storage in Laravel

Need help with saving multiple input fields to a database using AJAX. Here's the issue, I'm having trouble sending a serialized form to my database. When I serialize the form, attach it to a hidden input field using JQuery, and send it along wit ...

phpjqueryajaxlaravel

Trouble opening attached html file with Asp.net and Google Charts integration

I am facing an issue with my Asp.Net page that includes a grid and an image. The image is a Google Charts chart with a URL of approximately 1600 characters. To send this content as an email attachment, I created an .htm file containing the grid and the ima ...

asp.nethtmlgoogle-visualization

An unusual type of data is being stored in a MySQL database through Navicat Premium while using Django

Recently, I've encountered an issue while trying to insert data from an HTML form into my database. Strangely, upon submission, the values for "gender" and "website rating" get replaced with "on" instead of the actual input provided through the websit ...

pythonhtmlmysqldjango

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

htmlcss

Performing bulk operations on all selected rows in a table using Angular 6

Within my Angular 6 web application, there is a table with checkboxes in each row. My goal is to be able to perform bulk actions on the selected rows, such as deleting them. One approach I considered was adding an isSelected boolean property to the data m ...

angularhtmltypescript

Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same ...

javascriptjquerycss

Tips on eliminating the gap between the dropdown menu in Firefox browser

After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox. View in Firefox browser: https://i.stack.imgur.com/WYpuy.png View in Chrome browser: ...

htmlcss

Utilize Javascript to extract and showcase JSON data fetched from a RESTful API

I'm attempting to use JavaScript to pull JSON data from a REST API and display it on a webpage. The REST call is functioning correctly in the Firefox console. function gethosts() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "https://10 ...

javascripthtmljsonajaxrest