perspective-origin | CSS-Tricks

Last updated on: March 27, 2013

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: &lt;percentage> | &lt;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!

It starts at `0% 0%` (top left)
Then go to `100% 0%` (top right)
Then to `100% 100%` (bottom right)
Then to `0% 100%` (bottom left)
Then go back to 1. and restart

Related Properties

Other Resources

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
12+	Any	10+	None	10+	3+	Any

Firefox 10-15 need -moz-, WebKit browsers may need -webkit-.

Comments

Nick

# March 28, 2013

That’s pretty awesome.

Reply ↓

Phil Thompson

# July 15, 2013

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.

Reply ↓

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

Copy and paste this code: micuno *

Notify me of follow-up comments by email.

Notify me of new posts by email.

What now? I have some ideas for you.