Ensuring a smooth user experience on Internet Explorer with CSS backup

I am looking to incorporate a CSS 3D effect into a website. I have successfully implemented it on all browsers except Internet Explorer (including IE 11). As far as I know, IE does not support preserve-3d. Can someone help me add a fallback option for IE, such as a fade or slide upwards transition?

Below is the code snippet:

CSS

.cube {
width: 100%;
text-align: center;
margin: 0 auto;
height: 200px;
-webkit-transition: -webkit-transform .43s;
transition: transform .43s; 
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

}

.cube:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg); 


.before,.after {
background: rgb(247, 247, 247);
border: 4px solid rgba(147, 184, 189, .0);
height: 200px;
padding: 20px;
cursor: pointer;
}

.before {
font-family: 'OpenSansLight';
font-size: 28px;
letter-spacing: 0.5px;
line-height: 40px;
margin-top: 10px;
margin-bottom: 10px;
color: #444444;
border: 2px solid #EFEFEF;
background: #ffffff;
-webkit-transform: translateZ(110px);
transform: translateZ(110px);
}

.after {
font-family: 'OpenSansLight';
font-size: 16px;
letter-spacing: 0.5px;
line-height: 30px;
margin-top: 10px;
margin-bottom: 10px;
color: #f8f8f8;
background: #CF222D;
Border-bottom: 8px solid #b81a24;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.12);
-webkit-transform: rotateX(-90deg) translateZ(-110px);
transform: rotateX(-90deg) translateZ(-110px);
}

HTML

<div class="cube">
<div class="before">'
<strong>Before</strong>
</div>
<div class="after">
<strong>After</strong>
</div>
</div>

Answer №1

If you want to target Internet Explorer specifically, you can utilize this media query which will apply styles to both IE 10 and 11. The -ms-high-contrast setting is unique to IE, making it a reliable indicator for targeting this browser.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* CSS styles for IE10+ can be placed here */
}

For older versions of IE, conditional comments can also be used.

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

Conceal a table with jQuery

Is there a way to initially conceal a table on page load only to reveal it with a sliding animation when a specific link is clicked? I have attempted using the following code to hide the table: $('.table_div').hide(); I have enclosed the table ...

` `Spinning graphics and written content``

I am looking to create a dynamic element on my website where an image and corresponding text block rotate every few seconds. An example of what I am envisioning can be seen on this website: While I know how to implement a javascript for rotating images, I ...

Unlock the power of jQuery to apply CSS transition effects and animations with precision

A web application utilized Bootstrap, featuring a toggle navigation for the sidebar drawer/navigation that was supposed to be animated by default. However, there appeared to be no animation happening. To address this issue, the following CSS code was imple ...

Tips for arranging items in rows using display flex and removing excess white space from taller boxes

I'm having trouble setting up a flex structure like this: https://i.sstatic.net/l11bl.png I can't seem to make it work because the items in a row are taking up space. Is there a way to accomplish this? .container { display:flex; flex-flow ...

Resizing a column in the Bootstrap CSS grid causes adjacent columns to move

I am currently working with a bootstrap grid that includes an expand component. The issue I am facing is that when I expand one column, the other columns in the same row also shift. Is there a way to make each column independent of the others? expand co ...

Chrome method for creating Flexbox columns of equal height

I am implementing a simple 2-column layout and I want to utilize Flexbox to ensure equal heights for the columns: HTML <div class="row flex"> <!-- menu --> <div class="col-xs-4"> <aside> Menu content wi ...

Horizontal Scrolling Menu for Dynamic Page Navigation

My goal was to create a smooth-scrolling one-page website that scrolls horizontally. One feature I wanted was a menu that smoothly slides into view whenever a new page is in focus along with the horizontal scrolling. I found an example of a scrolling scr ...

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

Issue with floating the navbar to the right in Bootstrap 4

I am trying to reposition the navbar (without logo) to the right side using code. To achieve this, I included the class "float-right" like so <div class="collapse navbar-collapse float-right" id="navbarSupportedContent">. However, this modification ...

Assignment on Ionic's Cascading Style Sheets classes

As I work on styling my app, I find myself struggling with the extra CSS classes that are added when I preview the source in a running app. It's particularly confusing when all I want to do is change the menu header background. In my app.html file, I ...

Utilizing CSS and HTML to center elements

My jquery datepicker is set up to display color dots above certain days to represent information for that day. I'm running into some CSS issues. I'm trying to center the dots with the corresponding numbers, but when I do that, the days with dot ...

Javascript window.scroll function malfunctioning in some browsers while running in localhost

Check out this codepen link where everything is working, but unfortunately not locally: https://codepen.io/LoudDesignStudios/pen/RwxPJKY <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> < ...

Applying FadeIn Effect to Background Image on Hover

For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward. $(document).ready(function() { $("img.a").hover( function() { $(this).stop().animate({ ...

Cross Domain Requests in Internet Explorer: Preflight not being sent

I have come across several similar discussions but none of the solutions provided have worked for me so far. Issue: In our current setup, we have three servers hosting our http-apis - two for testing and one for production. Lately, we have been deployin ...

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

What is the best way to include a drop-right menu within a dropdown menu?

Hey there! I'm working on a page that features a dropdown navbar. My goal is to create a secondary dropdown that appears to the right when hovering over an li element within the initial dropdown. Any tips on how to accomplish this? Thanks in advance! ...

Emphasize the current page's menu item for the user viewing it

I'm looking for a way to visually emphasize the current menu item so that users can easily identify the page they are currently on. This could be achieved through bolding or underlining, whichever works best. I'm hoping to accomplish this using o ...

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

Troubleshooting CSS Navigation Drop Issue Specific to Google Chrome. Seeking Feedback on Rails Tutorial Experience

I'm currently working my way through the amazing Rails Tutorial and have encountered a problem with the Navigation bar dropping down into the body of the page, but this issue only seems to occur in Chrome (I'm using Linux, Ubuntu 10.10). I'v ...

Internet Explorer is experiencing difficulties in loading content using jQuery

I'm trying to implement a method similar to the one shown in this link on the link provided below. The first link works fine in IE, but for some reason my approach is failing in IE. It's loading the content, but the old content seems to still be ...