CODEWITHSUNDEEP
csscss-transforms
Poisontonomes
Poisontonomes

Reputation: 155

CSS transform issue in webkit

I'm having an issue with a little effect I'm trying to create using CSS3 animations.

I have a grid of portfolio items that, on hover, flip round to show some information about each individual project.

This works fine in FF but in Chrome it gets a little buggy.

I've created a simple fiddle that shows the problem http://jsfiddle.net/NX7GM/2/ and below is the code used;

HTML

<a href="#">

    <div class="flipper">

        <div class="front">

            <img src="http://placehold.it/300/300" alt="#"/>

        </div><!--/.front-->

        <div class="back">

            <div class="table">

                <div class="table-cell">

                    <h2 class="big-title">Title</h2>

                </div><!--/.table-cell-->

            </div><!--/.table-->

        </div><!--/.back-->

    </div><!--/.flipper-->

</a>

CSS

*, *:after, *:before {
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
} 

.work-item{
    display:inline-block;
    margin:0 30px 30px 0
}

.flip-container {
    perspective: 1000;
    -webkit-perspective:1000;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.flip-container:hover .back {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.flip-container:hover .front {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 300px;
    height: 300px
}

.flipper {
    transition: 0.6s;
    -webkit-transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility:hidden;
    transition: 0.6s;
    -webkit-transition: 0.6s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    border:#fff 4px solid;
    box-shadow: 0px 2px 6px -2px #999;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.back {
    background:#bfdb00;
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#c0dc00), to(#a3bb00));
    background: -webkit-radial-gradient(circle, #c0dc00, #a3bb00);
    background: -moz-radial-gradient(circle, #c0dc00, #a3bb00);
    background: -ms-radial-gradient(circle, #c0dc00, #a3bb00);
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    padding:50px;
    text-align:left
}

.back .big-title{
    font-size:20px;
    text-shadow:1px 1px 1px rgba(0, 0, 0, .3);
    letter-spacing:normal;
    line-height:24px;
    margin-bottom:10px
}

Upvotes: 0

Views: 1185

Answers (1)

Shiva
Shiva

Reputation: 36

This is happening because both .front and .back are absolutely positioned (causing the containing a to collapse since its contents are out of the normal flow, and its display is inline).

Since .flip-container has an explicit height, you can just set the a to have a 100% height (and change its display to block). This makes it occupy the containers height/width and allows the entire card to be hovered. Here's an example.

.flip-container a {
    display: block;
    height: 100%;
}

Upvotes: 1

Related Questions