javascript – 如何使用css3校正鱼眼全景图?

我觉得有时间将我的flash全景图转换为js /
html5 /
css3.我看过一些使用单独的平面图像的优雅解决方案,但我的都是鱼眼……

我的直觉告诉我,使用-webkit-transform:matrix3d是可行的,但我并没有完全达到它.

任何想法,如果这真的可以在css3中完成?

谢谢你好心.

最佳答案 是的,它可以做到,但你更了解你的数学.请注意,您不使用CSS3,而是使用专有扩展,这只适用于webkit浏览器.你可能最好在工作中使用Canvas元素,不仅是它支持更多的浏览器,它还为你提供了更大的自由来做你想做的任何转换.

编辑:
那么,将你的图像切割成许多薄的垂直切片,每个切片应按大约1 / cos([偏离中心的角度])缩放,并且倾斜以考虑在右侧和左侧的角度不同切片.这样你应该得到一个“逆鱼眼”形状,其中图像的顶部和底部是凹的,你可能想把它切成方形.

点赞