简易3d导航条心得

简易3d导航条
html布局:

• 
  
• 
  it
  html5
  
• 
  it
  html5
  
• 
  it
  html5
  
• 
  it
  html5
  

如果为
span:last-child{
transform:translateZ(-15px) translateY(-15px) rotate(90deg);
}
此时
li{
transform-style:preserve-3d;
transform:rotateX(90deg);
}
Li以X轴旋转90度，此时li的中心点在span:first-child上，所以在li转动后，会产生导航条向上平移15px的效果。

若想除去这种效果，需要将li旋转中心在两个pan组成的类立方体中心。
span:first-child{
translateZ(-15px)
}
span:last-child{
transform:translateY(-15px) rotate(90deg);
}