CODEWITHSUNDEEP
css
jake
jake

Reputation: 136

css rotate3d() translate 3d(); not working in firefox and IE11 but working in chrome

css animation transform: rotate3d is working fine in chrome but in firefox and IE11. Its just moving from left to right onmousever in firefox but not flipping like how its working chrome and opera.

.box {
  width: 100px;
  height: 50px;
  float: left;
  background: #007bff;
  text-align: center;
  color: white;
  font-size: 20px;
  padding-top: 35px;
  position: relative;
  transition: 0.5s;
}

.box:hover {
  transform: rotate3d(-10, -10, 1, 360deg) translate3d(100px, 0px, 0px);
  transition: 0.5s;
}
<div class="box">
  Hi!
</div>

Upvotes: 0

Views: 1319

Answers (1)

vals
vals

Reputation: 64164

Apply to the base state a similar transform, but with the rotation and translation set to zero: (tested only in FF)

.box {
  width: 100px;
  height: 50px;
  float: left;
  background: #007bff;
  text-align: center;
  color: white;
  font-size: 20px;
  padding-top: 35px;
  position: relative;
  transition: 0.5s;
  transform: rotate3d(-10, -10, 1,0deg) translate3d(0px, 0px, 0px);
  
}

.box:hover {
  transform: rotate3d(-10, -10, 1, 360deg) translate3d(100px, 0px, 0px);
}
<div class="box">
  Hi!
</div>

Upvotes: 1

Related Questions