CODEWITHSUNDEEP
css3dcss-transforms
thiirteen
thiirteen

Reputation: 103

CSS perspective-origin relative to window

I set perspective-origin: 50% 50% on the body and all elements that move along the Z axis are shown with perspective relative to the height of the document. I would like to set perspective origin to the middle of my browser window, in a way that it updates the point of view as I scroll vertically or horizontally.

Any ideas? Think I would have to use JavaScript?

Upvotes: 3

Views: 1386

Answers (1)

grilly
grilly

Reputation: 450

Try the following:

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  perspective: 500px;
  overflow: auto;
}

Here's a demo: http://codepen.io/Grilly86/pen/pvdGEm

Upvotes: 6

Related Questions