我觉得现在是时候将我的Flash全景照片转换为js/html5/css3了。我看到了一些使用单独的平面图像的优雅解决方案,但是我的全景照片都是鱼眼镜头拍摄的...
我的直觉告诉我可以使用-webkit-transform: matrix3d来完成,但我还没有完全掌握它。
有没有想法这是否可以在css3中实现?
非常感谢。
我觉得现在是时候将我的Flash全景照片转换为js/html5/css3了。我看到了一些使用单独的平面图像的优雅解决方案,但是我的全景照片都是鱼眼镜头拍摄的...
我的直觉告诉我可以使用-webkit-transform: matrix3d来完成,但我还没有完全掌握它。
有没有想法这是否可以在css3中实现?
非常感谢。
可以做到,但最好了解您的数学知识。请注意,您不是使用CSS3而是专有扩展,这仅适用于Webkit浏览器。您可能最好使用Canvas元素完成此工作,它不仅受到更多浏览器的支持,而且还可以让您自由地进行任何所需的转换。
编辑:
那么,将图像切成许多细长的垂直切片,每个切片应按大约1/cos([偏离中心角度])缩放,并倾斜以考虑切片右侧和左侧的角度不同。这样,您应该得到一个“反鱼眼”形状,其中图像的顶部和底部是凹形的,您可能需要将其切成正方形。