简体繁体 English

使用CSS3创建3D图像效果？

[英]Create 3D image effect with CSS3?

原文 2011-09-20 10:10:42 5 2 javascript/ css/ mootools/ 3d

Is there any way to manipulate an image with CSS3/Mootools to create the 3D effect? 有没有办法用CSS3 / Mootools来操作图像来创建3D效果？

Clarifying 3D as in the kind you put on Glasses with red and blue filters on to see the 3D effect. 澄清3D，就像你戴上红色和蓝色滤镜的眼镜一样，看3D效果。 Not just a drop-shadow on a box kinda thing. 不只是盒子上的阴影有点像。

If I have a normal photo can I turn that 3D on the fly with CSS or/and Mootools? 如果我有正常的照片，我可以使用CSS或/和Mootools动态转动3D吗？

2 个解决方案

No. 没有。

You'd need something very specialised (it would probably have to operate with <canvas> or a plugin) to generate such as image even if you had a 3d source to start with (which you don't). 你需要一些非常专业的东西（它可能需要用<canvas>或一个插件来操作）来生成像图像，即使你有一个3d源（你没有）。

You probably could use box-shadow and text-shadow to achieve this kind of effect at a basic level. 您可能可以使用box-shadow和text-shadow在基本级别实现此类效果。 Colour your text blue and your text shadow red (and non-blurred). 将文本颜色设置为蓝色，将文本颜色设置为红色（并且不显示模糊）。

However this would only work up to a point - there would be things which you simply couldn't do. 然而，这只会达到一定程度 - 有些事情你根本做不到。 Text shadow should be able to do this quite effectively, but box shadow would only work in limited cases. 文本阴影应该能够非常有效地执行此操作，但是框阴影仅在有限的情况下有效。 Images certainly wouldn't be doable (though I guess you could always serve your images with the colour split already in place), and you'd have to limit yourself to effectively a monochrome page. 图像肯定是不可行的（虽然我猜你总是可以用已经到位的颜色分割来提供你的图像），你必须限制自己有效地单色页面。

It would also mean calculating the whole thing manually when you write your CSS. 这也意味着在编写CSS时手动计算整个事物。 Hmmm.... fun. 嗯....好玩。