2-Sided Card not working in IE

HTML & CSS
1

I have created a 2-sided card that works in Firefox and Chrome but does not work in IE. Here is the code:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Trying to create flip effect for a post card</title>
<style>
/* container that wraps two faces of the card */

#card
{
	position:relative;
	-webkit-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;	
	transform-style:preserve-3d;
	max-width:500px;
	height:300px;
	


	
}
.shadow
{
	box-shadow:5px 5px 5px brown;
	-webkit-box-shadow:5px 5px 5px brown;
	-ms-box-shadow:5px 5px 5px brown;
}

.face
{
	border-radius: 20px 20px;
	padding:20px 20px 20px 20px;
    -webkit-backface-visibility:hidden;	
    backface-visibility:hidden;	
   

}

#front
{
	
	position:absolute;
	background-color:green; 
	width:100%;
	height:100%;
}

#back
{
	
	position:absolute;
	background-color:lime;
	width:100%;
	height:100%;
	-webkit-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
		transform:rotateY(180deg);


}
#card:hover 
{
	-webkit-transform:rotateY(180deg);
		-ms-transform:rotateY(180deg);
	transform:rotateY(180deg);
}
</style>
</head>

<body>
<p></p>
<div id="card">

<div class="face shadow" id="front">Hello</div>
<div class="face shadow" id="back">Thank You</div>
</div>
</body>

</html>

Q1. Could anybody suggest changes to the code so that it also works in IE?
Q2. How to make it responsive. I have used max-width to make it responsive but max-width does not work.
Thanks

2

afs_spunky,

The usual first questions:

Which version of IE are you trying to support?

Have you verified that the properties you have used are compatible with IE v?
http://caniuse.com/

In response to your edit, Show us your media queries.

3

Surely now that IE11 is the only version of IE that Microsoft still support, not specifying a particular unsupported version would imply IE11 as the version of IE that is meant?

4

Surely.

5

I tested in IE 11.

6

Have you verified that the properties you are using are compatible with IE11

7

I found out 1 problem: transform-style:preserve-3d; does not work in IE11.
But I do not know how to solve the problem.
Do you know?

8

You are using a bleeding edge property that has not been implemented in IE. Because there is usually more than one way to do something with CSS, it’s always fair to ask if there is another way. But, No, I don’t know how to solve that. Perhaps someone else knows some magic.

9

Wait until people stop using IE? :grimacing:

2 Likes
10

Microsoft are only providing security patches for IE now so where IE11 doesn’t support something IE will now never support it. Microsoft is encouraging people to use Edge instead of IE for everything except those few things that Edge does not yet support.

11

Thanks for update and your time!

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.