The flipping CSS code will not be compatible with IE 11

I'm experimenting with creating a flip animation that reveals link text when images are flipped. Everything works fine in most browsers, except for IE11.

Apparently there's an issue with transform-style: preserve-3d; in IE10, but being new to CSS, I haven't been able to fix the code.

Here's the HTML:

  <div class="flipcontainer">
    <div class="flipscene3D">
        <div class="flip">
            <div>
                <p>
                    <a itemprop="url" href="ARC3RFC.html"><span itemprop="headline">ARC3RFC Essay: Tomb 100, Tomb U-J and Maadi South: Themes from Predynastic Egypt</span></a> - 2013
                </p>
            </div>
            <div>
                <img src="ARC3RFC.jpg" class="flipimg">
            </div>
        </div>
    </div>
</div>

And the CSS:

img.flipimg {
            height: 150px;
            width: 150px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        .flipcontainer {
            display: block;
            width: 760px;
            height: 700px;
            margin: 30px auto;
        }
        .flipscene3D {
            display: block;
            float: left;
            margin: 10px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /*perspective*/
            -webkit-perspective: 300px;
            -moz-perspective: 300px;
            -ms-perspective: 300px;
            -o-perspective: 300px;
            perspective: 300px;
        }
        .flip div {
        position: absolute;
        width: 150px;
        height: 150px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index: 500
        }
        .flip div:first-child {
            font-size: 12px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            background: #333;
            /*transform*/
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
        .flip div:first-child p {
            color: #FFF;
            text-shadow: 0 0 1px .111;
            padding-top: 10px;
            text-align: center;
        }
        .flip {
            width: 150px;
            height: 150px;
            /*border-radius*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            /*box-shadow*/
            -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
            -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
            box-shadow: 0 0 15px rgba(0,0,0,0.3);
            /*transfor...
htmlcssinternet-explorerflip

Answer №1

Take a look at this demonstration of a flipping animation. It might provide the solution you're looking for.

Click on the DEMO to see it in action.

Here is an example of the HTML code used:

<div class="wrapper">
    <div class="front anim">
        Chrome
    </div>
    <div class="back anim">
        IE
    </div>
</div>

And here is the corresponding CSS code:

.wrapper {
    width: 300px;
    height: 300px;
    margin: auto;
    position: relative;
}

.anim {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

.front {
    z-index: 2;
    background: url(http://lorempixel.com/300/300/) no-repeat;
}

.back {
    z-index: 1;
    -webkit-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);  
    transform: rotateX(-180deg);  
    background: url(http://placehold.it/300x300) no-repeat;
}

.wrapper:hover .front {
    z-index: 1;
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

.wrapper:hover .back {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

Answer №2

   .flipscene3D:hover .flip {
        /*apply flipping effect on hover*/
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        -ms-transform: rotateX(180deg);
        -o-transform: rotateX(180deg);
        transform: rotateX(180deg);
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1,
        M12=1.2246467991473532e-16,
        M21=-1.2246467991473532e-16,
        M22=-1,
        SizingMethod='auto expand'); 
    }

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

"Is there a way to verify the existence of checkbox array values within a database using PHP Laravel

In order to display checkboxes for each country that exists in the database, I need to verify if the countries in the database match with those in the list. Since the values are retrieved directly from the database and can't be set as input values due ...

javascriptphphtmlsqllaravel

What is the best way to transfer the window object from the current tab to the extension?

I am looking to retrieve user storage data (local and session) from a specific tab, similar to what is shown in this app (see screen below). From my understanding, I need to access the window object of the active tab. While I have obtained the object, I a ...

javascripthtmlgoogle-chromegoogle-chrome-extensionstorage

Adding variables to a div using jquery

Is there a way to use jQuery to append variables to a div? Below are my codes, but I am looking to display div tags in the append. For example: .append("" + p + "") var image = item.image; var label = item.label; var price = item.price; ...

javascriptjqueryhtmlcssfrontend

The Jquery click event is not triggering when clicked from a hyperlink reference

I have a specific HTML href in my code snippet: <a id="m_MC_hl6_8" class="no_loaderbox button_link inline_block " href="somelink" target="_self">link</a> Upon clicking this link, a waiting box is displayed on the page. However, I don't ...

javascriptjqueryhtml

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Check out the fiddle I created for my query https://jsfiddle.net/e7te8hf1/ <section id="action-bar"> <div id="logo"> <a href="#"><img src="img/logo.png"></a> </div><!-- end logo --> <nav class="navbar navigat ...

javascripthtmlcssflip

What methods are available for identifying non-operational pointer-events?

According to this resource, Opera 12 does not support pointer-events, causing issues with my website. Interestingly, they do support the property in CSS but don't seem to implement it correctly. Modernizr's feature detection doesn't help in ...

javascriptcssoperamodernizrpointer-events

Controlling z-buffering for transparent textures in Three.js

Creating a simple map with flat, paper-like trees protruding from it in WebGL using THREE.js has been quite a challenge. The issue lies in understanding how the library handles z-buffering. Despite numerous attempts to tweak parameters like renderer.sortOb ...

htmlcanvas3dthree.js

Create a webpage that utilizes PHP, MySQL, and HTML to load additional content in a way similar to Facebook or the

Seeking guidance on how to incorporate pagination functionality akin to Twitter and Facebook, where a list of items loads initially and then a "load more" button appears below. When clicked, this button appends the list with additional items. Can anyone ...

htmlcssajax

Tips for adding an image to HTML after clicking on a div element

Is there a way to prompt users to upload an image by clicking on a <div> that contains an <img>? The current code I have is: <div class="container"> <img src="..." alt="Profile image" class="profileImg"> ...

html

What are the steps to repairing the footer on your website?

Here is the issue I am facing: The footer in my HTML code appears after the grid. How can I fix this problem and make my footer fixed? Below is my HTML and CSS code for reference: <footer> <li><a href="">Menu</a>< ...

htmlcss

The input element extends beyond the boundaries of the container

When the text is too long, the input exceeds the boundaries of its parent container. I have been exploring ways to wrap the text within the element. I attempted using CSS properties like word-break and text-wrap, but unfortunately, none of them produced t ...

htmlcsslist

Is there a way to effortlessly generate a mini-website from Markdown files?

Can a tool be found that creates a mini-website from locally-stored Markdown files complete with automatically generated navigation? I'm hoping for a service that can sync with my Dropbox, analyze the file structure, read the Markdown files, and effo ...

cssmarkdowndropboxwikijekyll

Is it possible to modify a website's CSS permanently using just the browser?

Is there a way to make changes to CSS in a large project using Firefox's built-in developer tools and have them saved permanently? I've been trying to edit the style sheets, but couldn't locate the specific property I needed. Since I can&apo ...

htmlcssfirefoxfirefox-developer-tools

Getting two child elements to be perfectly centered vertically

I have encountered a similar issue to many others, but despite trying various solutions, I can't seem to identify where I am going wrong. My parent element is supposed to display 3 blocks of information across the screen, each consisting of a large ic ...

htmlcssdisplay

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

Encountering some issues with the HTML code below when resizing the window: 1: The right bar suddenly drops down if the width is made too small. 2: The spacing between the content and the right bar expands as the window width increases. <style ty ...

htmlcss

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

javascripthtmlelectron

Locate numbers 2, 3, 6, 7, and 10, and continue in numerical order, within the

Having trouble with this one. Does anyone know how to display the items like this: 2, 3, 6, 7, 10 and so on... Is there a jQuery or CSS hack that can achieve this? I'm stuck trying to figure it out .container { display: flex; flex-flow: row wra ...

jquerycss

What is the proper way to assign a class name to an animation state in Angular 2/4?

I am currently working with Angular Animations using version 4.1.3 Check out the code snippet below: @Component({ selector : 'my-fader', animations: [ trigger('visibilityChanged', [ state('true' , style({ opaci ...

cssangularangular2-routingangular2-animation

Check the validity of the data by logging into another website

I've run into a bit of a problem while working on my website. Here's a brief explanation (using fake addresses), I have a website, www.website1.com, with lots of well-coded elements. You can log in to this website using www.website2.com. So whe ...

phphtmlcurl

What is the process of implementing a tree view hierarchy in PHP using CodeIgniter?

I have an array structured like this: Array ( [0] => Array ( [id] => 1 [child_name] => "Emma" [parent_name] => "Mr Brown" ) [1] => Array ( [id] => 2 ...

phphtmlarrayscodeigniter