Grow your CSS skills. Land your dream job.

Small CSS3 problem with Chrome only

  • # 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;

    }

    # May 12, 2013 at 2:17 am

    A bulk of your problems are you have things that aren’t prefixed with vendor extensions.

    perspective, transform-style, transition, backface-visibility, and transform, I actually don’t track which ones need vendor prefixes anymore now that I use Compass, but it is possible that all of them need to be prefixed. Once I had them prefixed, I added this code and it worked (not sure how smooth because I didn’t want to set up anything).

    .front { z-index: 2; }
    .front:hover { z-index: 0; }

    There probably are some issues, but this will get you back on track. prefixes!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".