CODEWITHSUNDEEP
csscss-transformsrotatetransform
user3718546
user3718546

Reputation: 333

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.

Upvotes: 2

Views: 3670

Answers (2)

Kareem
Kareem

Reputation: 5432

Use transform origin

-webkit-transform-origin: $x $y;
-moz-transform-origin: $x $y;;
-o-transform-origin: $x $y;
transform-origin: $x $y;

Upvotes: 2

King King
King King

Reputation: 63387

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.

Upvotes: 1

Related Questions