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

• Safari CSS Reference
• Safari Visual Effects Guide
• Safari Web Content Guide: Handling Events
• Safari DOM Extensions Reference
• PosterCircle
• CardFlip
• SlideMe