CSS Block resets after rotation (transform)

Question

I'm trying to make certain image which rotates around when the mouse is hovering the object, If I do this rotation on the Y axis everything works fine, however when I do this on the X axis everything tends to fail like the example below.

EDIT: I'm using Chrome, and now looking further on this, Internet explorer doesn't even show the red face at all.

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  background: green;
}
.card:hover {
  transform: rotateX(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateX(180deg);
  background: red;
}

<div class="card-container">
  <div class="card">
    <div class="side"></div>
    <div class="side back"></div>
  </div>
</div>

Correct version (Y version):

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  background: green;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  transform: rotateY(180deg);
  background: red;
}

<div class="card-container">
  <div class="card">
    <div class="side"></div>
    <div class="side back"></div>
  </div>
</div>

The image resets to the green side when the animation is complete — Azrael
– Azrael, Commented Sep 23, 2014 at 10:09
This is how the transition works: if you lose the :hover state you have a transition to the initial state — Fabrizio Calderan
– Fabrizio Calderan, Commented Sep 23, 2014 at 10:10
@Fabrizio Then why the difference in behavior between rotateX and rotateY? — isogram
– isogram, Commented Sep 23, 2014 at 10:11

Fabrizio Calderan · Accepted Answer · 2014-09-23 10:24:34Z

2

If you remove transform: rotateX(180deg); from .card .back it properly works also on Chrome

.card-container {
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  background: green;
}
.card:hover {
  transform: rotateX(180deg);
}
.card .side {
  backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
}
.card .back {
  background: red;
}

<div class="card-container">
  <div class="card">
    <div class="side"></div>
    <div class="side back"></div>
  </div>
</div>

answered Sep 23, 2014 at 10:24

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Azrael Over a year ago

Your code does the colors inverted, but I'll find a workaround for that, Thanks! i'll mark it as an awnser as soon as I am allowed to do that.

Collectives™ on Stack Overflow

CSS Block resets after rotation (transform)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related