出名的网站建设公司/南昌百度搜索排名优化

css创建一个3d空间

我们已经看到了CSS3 text-shadow属性如何用于创建发光和模糊的文本。 今天，我们将把属性推到极限，并进入3D领域：

这是在没有图形，插件或画布欺骗的情况下实现的。 不相信我吗 看一下 Firefox，Chrome，Safari或Opera 中的示例页面 （对不起IE用户-您需要等待版本10） 。

深度是用多个文本阴影创建的。 每个都有零模糊，并且越来越偏离正文。 该图显示了层的构造方式，但在实际示例中，颜色相似且间距不超过1px：

然后应用一些模糊阴影以使3D效果更加逼真。 最终CSS：

p.threeD
{
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1)
;
}

演示页面显示了一个示例，并包含完整的源代码。

好的，所以效果不错，但是疲惫的打字手指要花很多CSS代码。 建立自己的样式也将花费时间和精力。 如果我们有什么可以为我们处理驴子工作，那不是很好吗？ 敬请关注SitePoint…

翻译自: https://www.sitepoint.com/css3-3d-text/

css创建一个3d空间