The perspective-origin property determines the origin for the perspective property. Think of it as the vanishing point of the current 3D-space.

Note as for the perspective property, perspective-origin has to be defined on the parent element in order to give the transformed children depth.

The perspective-origin property doesn't do anything by itself. It has to be defined on an element along with perspective.

 * Syntax 
 * perspective-origin: x-position
 * perspective-origin: x-position y-position
 * perspective-origin: <percentage> | <length> | constants | inherit

.element1 { perspective-origin: 25% 75%; }

.element2 { perspective-origin: 10px 25px; }

.element3 { perspective-origin: left bottom; }

Below is a demo showing how a 3D cube behaves when altering its vanishing point by changing the perspective-origin value (constants).

Check out this Pen!

Hey, let's animate the perspective-origin, just for fun!

Check out this Pen!
  1. It starts at `0% 0%` (top left)
  2. Then go to `100% 0%` (top right)
  3. Then to `100% 100%` (bottom right)
  4. Then to `0% 100%` (bottom left)
  5. Then go back to 1. and restart

Related Properties

Other Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


  1. User Avatar
    Permalink to comment#

    That’s pretty awesome.

  2. User Avatar
    Phil Thompson
    Permalink to comment#

    For some reason this isn’t working in chrome on my work machine, It has chrome 28 running on ubuntu, it seams like none of the 3D effects seam to work in this version of chrome on ubuntu.

  3. User Avatar
    Permalink to comment#

    Thanks for your good job.

    But I just hava a question after having read your article

    You said “The perspective-origin property determines the origin for the perspective property. Think of it as the vanishing point of the current 3D-space.” in your article

    In css3 3d transform spec it says “The ‘perspective-origin’ property establishes the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.”

    I think viewer is,Is the viewpoint and vanishing point coincide in 3D transform? Thanks for your help

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.