CSS Property perspective-origin








The perspective-origin property sets the origin for the perspective property.

It is the vanishing point of the 3D-space.

Summary

Initial value
50% 50%
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.perspectiveOrigin="10px 50%"
Animatable
yes

CSS Syntax

perspective-origin: x-axis y-axis|initial|inherit;

Possible values for x-axis:

  • left
  • center
  • right
  • length
  • %

Possible values for y-axis:

  • top
  • center
  • bottom
  • length
  • %




Property Values

x-axis
Defining where the view is placed at the x-axis. Default value: 50%
y-axis
Defining where the view is placed at the y-axis. Default value: 50%

Browser compatibility

perspective-origin 36.0 (12.0 -webkit-) 10.0 Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {<!--  w  w w  .ja v a  2  s.c  o m-->
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 150px; /* Chrome, Safari, Opera */
    -webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
    perspective: 150px;
    perspective-origin: 30% 80%;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    -webkit-transform: rotateX(45deg); /* Chrome, Safari, Opera */
    transform: rotateX(45deg);
}

</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

Click to view the demo





Example 2

<!DOCTYPE html>
<html>
<style class="cp-pen-styles">
.wrapper {<!--   w  w  w  .j av a 2s  .co m-->
  width: 30%;
  display: inline-block;
}

.wrapper h1 {
  text-align: center;
}

.cube {
  font-size: 2em;
  width: 2em;
  height: 2em;
  margin: .5em auto;
  transform-style: preserve-3d;
  perspective: 250px;
}

.w1 .cube {
  perspective-origin: top left;
}

.w2 .cube {
  perspective-origin: top;
}

.w3 .cube {
  perspective-origin: top right;
}

.w4 .cube {
  perspective-origin: left;
}

.w5 .cube {
  perspective-origin: center;
}

.w6 .cube {
  perspective-origin: right;
}

.w7 .cube {
  perspective-origin: bottom left;
}

.w8 .cube {
  perspective-origin: bottom;
}

.w9 .cube {
  perspective-origin: bottom right;
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: rgba(0, 200, 0, 0.6);
  border: 1px solid black;
  color: white;
}

.front {
  transform: translateZ(1em);
}

.top {
  transform: rotateX(90deg) translateZ(1em);
}

.right {
  transform: rotateY(90deg) translateZ(1em);
}

.left {
  transform: rotateY(-90deg) translateZ(1em);
}

.bottom {
  transform: rotateX(-90deg) translateZ(1em);
}

.back {
  transform: rotateY(-180deg) translateZ(1em);
}
</style></head><body>
<div class="wrapper w1">
  <h1><code>top left</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w2">
  <h1><code>top</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w3">
  <h1><code>top right</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w4">
  <h1><code>left</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w5">
  <h1><code>center</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w6">
  <h1><code>right</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w7">
  <h1><code>bottom left</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w8">
  <h1><code>bottom</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
<div class="wrapper w9">
  <h1><code>bottom right</code></h1>
  <div class="cube">
    <div class="side  front">1</div>
    <div class="side   back">6</div>
    <div class="side  right">4</div>
    <div class="side   left">3</div>
    <div class="side    top">5</div>
    <div class="side bottom">2</div>
  </div>
</div>
</body></html>

Click to view the demo