When looking at a cube from different perspectives, as shown in this example: http://codepen.io/HugoGiraudel/pen/GLbca
The cube on the right has a perspective of -webkit-perspective: 250px;, while the one on the left has -webkit-perspective: 1000px;
According to Mozilla: "The perspective CSS property defines the distance between the z=0 plane and the user, creating a sense of depth. Elements with z>0 appear larger, while elements with z<0 appear smaller. The value set for this property determines the strength of the effect."
In this scenario, the right cube should be closer to the user by 750px, so why isn't it significantly larger than the left cube? Furthermore, if you adjust the perspective using dev tools to an extensive number like 10000px, the size of the cube remains the same. Shouldn't it become extremely small?
Here is the code snippet provided by 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 here is the accompanying 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); }