.test
{
text-shadow:
1px 1px 0 #CCC,
2px 2px 0 #CCC, /* end of 2 level deep grey shadow */
3px 3px 0 #444,
4px 4px 0 #444,
5px 5px 0 #444,
6px 6px 0 #444 /* end of 4 level deep dark shadow */
}
</style>
<body>
<h1>3D效果</h1>
</body>
// 具体效果可以改变颜色值和位移值来实现不同的3d效果
text-shadow: h-shadow v-shadow blur colorh-shadow 水平阴影位置
v-shadow 竖直阴影位置
blur 模糊距离
color 阴影颜色
通过合理的调整就可以制作出3D的效果
当然动态的 transform:rotateY() 这些属性也可以做出3D效果 看你具体想要什么