CODEWITHSUNDEEP
htmlcss
Bender
Bender

Reputation: 581

CSS transform-origin not working as expected

I'm trying to create a flip effect in CSS which is working but I want the div to flip down so the center point of the animation is the bottom edge.

I thought transform-origin: 0 100%; would created the desired effect for me but it's not quite right. I've created this JSFiddle that shows the problem. Noticed how the bottom edge of the red div lifts up before it's flips down. Does anyone know how to correct this?

Also here is my HTML and CSS for reference

#f1_container {
  position: relative;
  width: 200px;
  height: 100px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
.thing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateX(180deg);
  transform-origin: 0 100%;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: red;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<div id="f1_container">
    <div class="thing">
        <p>This is some text</p>
    </div>
    <div id="f1_card">
        <div class="front face">
        </div>
        <div class="back face center">
            <p>This is nice for exposing more information about an image.</p>
        </div>
    </div>
</div>

Upvotes: 6

Views: 23990

Answers (1)

duvigneau
duvigneau

Reputation: 201

Move the transform-origin property to the #f1_card selector.

#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
  transform-origin: 0 100%;
}

https://jsfiddle.net/325d8m57/1/

In your code you only changed the transform-origin on hover. So it transitions from 50% 50% (the default value) to 0% 100% because you used all in your transition property.

Upvotes: 6

Related Questions