效果

最简单的实现

  1. 利用 CSS3 做出一个 3D 立方体。
  2. 在立方体的6个面设置目标图片(Pano2VR 或者类似的全景工具导出的图片,一共有6张)。
  3. 使用perspectivetranslateZtransform-style: preserve-3d 等属性改变视图的大小。
  4. 添加触摸事件改变translateXtranslateY的角度数即可实现一个基本的全景图效果。

Demo

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

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