Small CSS3 problem with Chrome only

[DoPeT]

Hey there guys,

I have a about us page that I’m coding and it sorta’ acts like a playing card where it shows the photo/name/title then hover shows the content and social networks. On firefox it works perfectly as intended however, in chrome.. It shows the ‘back face’ of the card and when hovered literally reverses the text opposite way.

Any solution to this if possible? Any help is greatly appreciated!!

[Site link: http://bit.ly/14eqG0W](http://bit.ly/14eqG0W “”)

HTML:

You

Sr. Front End Developer

Sr. Front-End Developer:
Do you have a thirst for excellence?
Only satisfied when you are building something great?

We want to hear from you.
[email protected].

CSS:

#flip-container {
position: relative;
margin: 0px auto;
width: 100%;
height: 406px;
z-index: 1;
}

#flip-container {
perspective: 1000;
}
#flip-card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}

#flip-container:hover #flip-card {
-moz-transform: scale(1.05) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) rotateY(-180deg);
-webkit-transform: scale(1.05) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) rotateY(-180deg);
-o-transform: scale(1.05) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) rotateY(-180deg);
-ms-transform: scale(1.05) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) rotateY(-180deg);
transform: scale(1.05) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg) rotateY(-180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: #f9f9f9;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 6px 0px 0px #ebebeb;
box-shadow: 0px 6px 0px 0px #ebebeb;

}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ccc;
text-align: center;
height: 406px;
background: #f9f9f9;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 6px 0px 0px #ebebeb;
box-shadow: 0px 6px 0px 0px #ebebeb;

}

[Author]

Posts