CSS Perspective, lower numbers should appear larger?

Question

In this example of a cube with different perspectives: http://codepen.io/HugoGiraudel/pen/GLbca

The one on the right has -webkit-perspective: 250px; whereas the one on the left has -webkit-perspective: 1000px;

According to Mozilla: "The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property."

In this case, the right cube should be 750px closer to the user, so why is it not considerably larger than the one on the left? Likewise, if you open up dev tools and change the perspective to a huge number like 10000px, the cube stays the same size. Shouldn't it be tiny?

Here is the code: It's not mine, so all credit goes to http://codepen.io/HugoGiraudel/

<div class="wrapper w1">
  <h1><code>perspective: 1000px</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>perspective: 250px</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>

And the CSS:

.wrapper {
  width: 50%;
  float: left;
}

.w1 {
  perspective: 1000px;
}

.w2 {
  perspective: 250px;
}

.wrapper h1 {
  text-align: center;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(32deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;

  background: rgba(tomato, .6);
  border: 1px solid rgba(0,0,0,.5);

  color: white; 
  text-align: center;
  line-height: 2em;
}

.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); }

I will upvote the question if you share your markup here, as this is really a good question — Mr. Alien, May 31 '13 at 11:50

score 0 · Accepted Answer · answered May 31 '13 at 17:12

You have to understand that what changes is the perspective, not the scale.

when you ask

In this case, the right cube should be 750px closer to the user, so why is it not considerably larger than the one on the left?

What you need to think is that you are 750px closer to calculate the perspective, NOT THE SIZE.

The key is this part in the specification:

Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller

Your cube is centered in the origin (You are giving each face the similar movement, in oposite directions). That means that the cube center (ok, there is nothing there, but get the concept) will keep the same size.

Similarly, if you imagine the z plane, it cuts the cube more or less in the half. In that plane, there is no dimension change.

The front face does indeed grow larger, and the backface does indeed grow smaller (by small amounts). This is more easily seen in the lines that get in nearer vertex, or in the farest vertex

CSS Perspective, lower numbers should appear larger?

1 Answers1