Css animations

Hi everyone,

I have made a simple css3 animation for some items but on iexplorer they, when hover whith the mouse, dont show the backface and .
on safari only shows the backface
How can i fix this.

See it here Home Page
.Its the black and red squares on the midle of the front page.

Start by validating the code on your page. According to the HTML validator, there are 34 errors in the HTML. Since an ID can be used only once on a page, and you have repeated two IDs 11 times each, that might be part of the problem. I would suggest that they should be classes instead of IDs. On the other hand, if JS targets these boxes, then each should probably have a unique ID.

Hi Ronpat,
thank you for the reply.

I tried to change to classes but now it is even worst.

I am not using any js , its just pure css animation.
How can i fix it now?

Since you changed the HTML IDs to classes, did you update the CSS accordingly? Aka turn #element into .element

Hi Ryan,
thank you for the reply,
ye si changed both in the css stylesheet and on the html.
You can see the origunal at:http://css3.bradshawenterprises.com/flip/


You put a space between .face and .back when there should be none.

e.g. It should be this:

.face.back {
	display: block;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	box-sizing: border-box;
	padding: 10px;
	color: white;
	text-align: center;
	background-color: #aaa;

It won’t work in IE though but neither does the original you linked to ( this demo has a fix for IE).

Hi Paul,
Thank you for that.
Ok i did that, it just works on chrome and firefox although. How does backface works on IE and safari?

I gave you a link above to an article that shows how to fix IE. It’s quite involved so I won’t try but the article explains it.:slight_smile:

Safari is working with the above code also. Unless you meant Safari on Windows and that was discontinued some years ago and will have little support for this.