CODEWITHSUNDEEP
webkitcss-transforms
DA.
DA.

Reputation: 40697

Controlling rotation axis with webkit 3d transform

I'm creating a card-flip effect using webkit transformations. I have it working as I like in one section, where I have a DIV that rotates around its center axis giving the look of a card that is flipping over.

I now want to add this same effect to a page transition. I'm using the same CSS and HTML structure, but in this case I'm not getting an effect that rotates around a center axis.

Instead, it looks like the transformation is rotating along the y axis anchored to the left of the object rather than the center (so it looks like a door opening, rather than a card flipping).

I've been reading through the spec's but can't figure out which property controls the rotation axis' position. What do I need to add or change with this to get the flip working?

html structure:

<div id="frontbackwrapper">
    <div id="front"></div>
    <div id="back"></div>
</div>

and the css (.flip is being added via jQuery to start the effect)

#frontbackwrapper {
    position: absolute;
    -webkit-perspective: 1000;
    -webkit-transition-duration: 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}
#frontbackwrapper.flip {
    -webkit-transform: rotateY(180deg);
}

#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
    -webkit-transform: rotateY(180deg);
    -webkit-transition: 1s;
}
#front, #back {
    position: absolute;
    -webkit-backface-visibility: hidden;  
}
#back {
    -webkit-transform: rotateY(180deg);
}

Upvotes: 0

Views: 955

Answers (1)

Nolsto
Nolsto

Reputation: 180

Try this on your wrapper 

-webkit-transform-origin: 50% 0 0;

Though you may or may not have to have its width explicitly set.

Upvotes: 1

Related Questions