Can css3 translateZ() be used instead of z-index?

css css-transforms translate3d
mumu2 picture mumu2 · Jul 31, 2013 · Viewed 9.7k times · Source

For example having 2 div's positioned absolute, one can put first div upon second by setting first div's z-index higher than second one's. Can we achieve such behaviour using translateZ() or translate3d?

Answer

curly_brackets picture curly_brackets · Apr 7, 2016

The answer now, 3 years after, is that you can. You need to use transform-style: preserve-3d; on the parent, but it's possible.

.container {
  transform-style: preserve-3d;
}
.test1 {
  width: 500px;
  height: 500px;
  background: red;
  transform: translate3d(0, 0, 1px);
}
.test2 {
  width: 500px;
  height: 500px;
  background: green;
  left: 250px;
  top: 250px;
  position: absolute;
  transform: translate3d(0, 0, 0);
}
<div class="container">
  <div class="test1">
    test
  </div>

  <div class="test2">
    test #2
  </div>
</div>

Related questions

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one transform? Example: In the following, only the translation is applied, not the rotation. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

Read More
Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More