perspective-origin

This is an experimental feature
Because this feature is still in development in some browsers, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental feature is subject to change in future version of browsers as the spec changes.

Summary

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

Syntax

perspective-origin: x-position                           or
perspective-origin: x-position y-position

When both x-position and y-position are keywords, the following is also valid:
perspective-origin: y-position x-position

where :

x-position
Indicates the position of the abscissa of the vanishing point. It can have one of the following values:
  • <percentage> indicating the position relative to the width of the element. The value may be negative.
  • <length> indicating the position using a length value. The value may be negative.
  • left, a keyword being a shortcut for the 0 length value.
  • center, a keyword being a shortcut for the 50% percentage value.
  • right, a keyword being a shortcut for the 100% percentage value.
y-position
Indicates the position of the ordinate of the vanishing point. It can have one of the following values:
  • <percentage> indicating the position relative to the height of the element. The value may be negative.
  • <length> indicating the position using a length value. The value may be negative.
  • top, a keyword being a shortcut for the 0 length value.
  • center, a keyword being a shortcut for the 50% percentage value.
  • bottom, a keyword being a shortcut for the 100% percentage value.

Examples

perspective-origin:top left; perspective-origin:top; perspective-origin:top right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
perspective-origin:left; perspective-origin:50% 50%; perspective-origin:right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
perspective-origin:bottom left; perspective-origin:bottom; perspective-origin:bottom right;
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6

Specifications

Specification Status Comment
CSS 3D Transforms Level 3 This has been merged in another draft. Please update  

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 12 -webkit 10.0 (10) -moz 10 -ms -- (Yes) -webkit
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 -webkit 10.0 (10) -moz ? -- (Yes) -webkit

See also

Tags (4)

Edit tags

Attachments (0)

 

Attach file