pelicin › web › CSS

Perspective

The perspective property controls the perspective for 3D transformation.

Perspective Properties

perspective

Controls the distance between the user and the z = 0 plane. Specify:

  • none — no perspective transform is to be applied
  • a length — e.g. 800px, the distance from the user to the z = 0 plane

3D elements with z > 0 becomes larger; 3D elements with z<0 becomes smaller. The strength of the effect is determined by the value of perspective. Also, the parts of the 3D elements behind the user are not drawn.

perspective-origin

Sets the vanishing point for perspective. Specify:

  • a keyword — e.g. center, top, or top left
  • a pair of lengths/percentages — e.g. 10px 10px or 25% 125% (denoting where the vanishing point is on the x and y axes)

Other Properties

backface-visibility

Sets whether the back face of an element is visible when the back face is facing the user. (Only makes sense in 3D space, with 3D transformations.)

  • visible — render it (mirror image of the front face) (default)
  • hidden — hide it (making the element invisible when turned away from the user)

Example

This example is taken from https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin

<section id="perspective-example">
  <div class="cube-container">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>
#perspective-example {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(skyblue,khaki);
  height: 200px;
}

#perspective-example .cube-container {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  perspective: 250px;
  perspective-origin: center center;
}

#perspective-example .face {
  font-size: 60px;
  color: #fff;
  /* center the text */
  display: flex;
  align-items: center;
  justify-content: center;
  /* ensure the div is a square */
  width: 100%;
  height: 100%;
  /* make the positioning independent of the other faces */
  position: absolute;
}

#perspective-example .front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}
#perspective-example .back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}
#perspective-example .right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}
#perspective-example .left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}
#perspective-example .top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}
#perspective-example .bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}
| LIVE PREVIEW
1
2
3
4
5
6

References