Forums

sanketjazz

hi, i just want to know that why 3d transform is not working on google chrome, same code working in firefox properly. plz help.

source code

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
  perspective: 1000;
}
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  width: 320px;
  height: 480px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}
</style>
</head>

<body>

</body>
</html>

chrisburton

Try using the webkit prefix. -webkit-transform.

GMB

Funny the 3D transform stopped working on my site with Chrome as well (still works in FF and Safari), and I am using the webkit prefix (with "transition" not "transform" -- could that be the issue?).

chrisburton

@GMB Yep. You need the -webkit- prefix. http://caniuse.com/#search=transform

Your site transform works for me. Pretty cool, by the way.

GMB

I am using the webkit prefix and the 3D transform used to work with Chrome. At one point that changed (though the code hadn't). I don't know why.

GMB

@chrisburton -- I'd love to take credit for the effect, but it's a very lightly retinkered version of Hakim El Hattab's Meny.

I'm puzzled though -- the 3D transform is not working for me with Chrome. Don't understand why.

chrisburton

@GMB Hey, sorry. It's probably best if you create a reduced test case on CodePen. This way we can eliminate the issue.

GMB

Just noticed that Hakim's Meny demo is not 3D transforming either in Chrome.

Hmm...

chrisburton

@GMB It's definitely on your end because it works for me: http://cloud.chrisburton.me/M0GQ

GMB

@chrisburton -- I've been trying to think of what it could be but have come up blank. I've check my settings -- they look normal. JS is definitely enabled.

Any idea what might cause this? If not perhaps I'll reinstall Chrome and see if that works.

chrisburton

@GMB It might be the settings which you could have overlooked. No idea, to be honest.

Type this into Chrome and check: about:flags

GMB

@chrisburton -- Thanks for pointing me to about:flags, which I was unaware of. Even with that however I was unable to figure out what was wrong and so wound up reinstalling Chrome -- the 3D transforms work as they should now. I appreciate your help.

treehouse : what would you like to learn today?

Forums

[Solved] 3d transform not working google chrome