效果

记录大概的实现过程

  1. 利用CSS3做出一个立方体。
  2. 然后在立方体的6个面设置背景图(Pano2VR 或者类似的工具导出的6张图)。
  3. 使用perspectivetranslateZtransform-style: preserve-3d改变视图的大小。
  4. 最后通过添加触摸事件改变translateXtranslateY的角度数即可实现全景图的浏览。

demo

注:页面使用了ES6,浏览器必须开启相关的功能才可以看到效果。

Chrome 60 打开 chrome:flags 启用 Experimental Web Platform features