CODEWITHSUNDEEP
cssanimationrotation
sdny
sdny

Reputation: 156

CSS rotateX around center

Alright. I've done quite a bit of research, but I wasn't able to come up with anything. After possibly over-thinking the problem, here is what I'd appreciate your help with.

I would like to be able to rotate a <div> around its center so its backside becomes visible. I was able to do that with rotateY--without any problems. But when using rotateX the <div> does not rotate around its center anymore.

The CSS:

.flip-container {
    font-size: 30px;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    margin: 0 auto;
    color: black;
}

.flip-container:hover .flipper {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
}

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

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
}

.front {
    z-index: 1;
}

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

.back {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);

This problem is driving me up the walls. I know it's something small I overlooked; but I can't find it. Any helps or hints would be greatly appreciated. :)

Fiddle

Upvotes: 1

Views: 1349

Answers (1)

zessx
zessx

Reputation: 68790

For a vertical rotation, you need to specify transform-origin, with :

  • <x> : 50%
  • <y> : half height of the div

Updated Fiddle

.flipper {    
    -webkit-transform-origin: 50% 100px;    
    -moz-transform-origin: 50% 100px;      
    -o-transform-origin: 50% 100px;    
    -ms-transform-origin: 50% 100px;  
    transform-origin: 50% 100px;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    position: relative;
}

Upvotes: 2

Related Questions