CODEWITHSUNDEEP
cssgoogle-chrome
Azrael
Azrael

Reputation: 1094

CSS Block resets after rotation (transform)

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>

Upvotes: 0

Views: 300

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123377

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>

Upvotes: 2

Related Questions