如何通过CSS设置文字 3D效果

html-css092

如何通过CSS设置文字 3D效果,第1张

<style>

.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 color

h-shadow 水平阴影位置

v-shadow 竖直阴影位置

blur 模糊距离

color 阴影颜色

通过合理的调整就可以制作出3D的效果

当然动态的 transform:rotateY() 这些属性也可以做出3D效果 看你具体想要什么