Forums

Give help. Get help.

  • # May 11, 2013 at 11:40 pm

    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.
    info@yellarewards.com.

    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;

    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag