csscss-transformsrotatetransform

rotate an element over it's bottom axis instead of its center when using rotateX()

I can't seem to get a div element to rotate around it's bottom edge. By default, rotateX(angle) makes the element rotate around it's center.

Here's a codepen: Trying to flip div over bottom edge

I tried playing with the transform-origin property but nothing seemed to work.

Solution

  • The problem is right on hovering, it's rotated (around X axis) and makes the :hover state inactive. It's very sensitive this way and may depend on different browsers. The solution is try using a placeholder (whose size and position are fixed while animating) wrapping your actual flip card:

    HTML:

    <div class='placeholder'>
 <div class="flipper forward">
   Hello
 </div>
</div>

    SCSS:

    .placeholder {
  width: 200px;
  height: 50px;  
  margin: 30px auto;
}
.flipper {
  background: red;
  text-align: center;
  line-height: 50px;
  width:100%;
  height:100%;
  border: 1px solid darkred;  
  //@include backface-visibility(hidden);
  -webkit-transform-origin: left bottom;
  @include transition(-webkit-transform 2s);
  @include transform(rotateX(0deg));  
}
.placeholder:hover > div {
  @include transform(rotateX(180deg));
}

    Updated demo.