用transform布局block元素层叠上下文

项目开发中，层叠上下文布局，可以用float , position, z-index 将block元素浮动层叠，而今天这里用transform:translate3d来处理。

例子： 

html:

transform:translate(30px,0):

<div class='transform-demo'>
</div>

transform:translate(0,10px) :
<div class='transform-demo1'>
</div>

  transform:translate3d(0,30px,10px) :
  <div class="transform-div2">
  
  </div>
<div class='transform-demo2'>
</div>

css: 

body{
  border:1px solid red;
}

.transform-demo , 
.transform-demo1,
.transform-demo2{
  width:50px;
  height:50px;
  background-color:#000;
}
.transform-div2{
  width:50px;
  height:50px;
  background-color:green;
}

.transform-demo{
  transform:translate(30px,0)
}

.transform-demo1{
  transform:translate(0,10px)
}

.transform-div2{
  transform:translate(20px,0px)
}
.transform-demo2{
  transform:translate3d(0,-10px,40px)
}

 

结果：