Safari Technology Demos

Back to overview
VR
Best Viewed: Safari on iOS, Mac OS X, Windows

VR

You can use HTML, CSS, and JavaScript to create virtual scenes in your web pages that work without any additional plug-in software. CSS transforms are used to position six images in 3D space to form a cube with the user's viewpoint inside. As you navigate, the cube is rotated to reflect the new appropriate position. Any standard web browser behaviors that would disrupt the experience — such as showing a selection color in Safari on the desktop, or the Save Image panel in Safari on iOS — can be disabled with a few additional CSS properties.

In this example:

  • CSS3 3D transforms position each side of the cube.
  • DOM touch events enable navigation on iOS.
  • Browser behaviors are disabled with -webkit-user-select, -webkit-touch-callout, and webkit-tap-highlight-color.

Related Resources