简易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);
}