Перспектива CSS, более низкие цифры должны быть больше?

Question

В этом примере куба с разными точками зрения: http://codepen.io/HugoGiraudel/pen/GLbca

Один справа имеет -webkit-perspective: 250px; в то время как один слева имеет -webkit-perspective: 1000px;

В соответствии с Mozilla: «Свойство перспективы CSS определяет расстояние между плоскостью z = 0 и пользователем, чтобы придать 3D-позиционированному элементу некоторую перспективу. Каждый трехмерный элемент с z> 0 становится больше, каждый 3D-элемент с z < 0 становится меньше. Сила эффекта определяется по значению этого свойства ».

В этом случае правый куб должен быть на 750 пикселей ближе к пользователю, так почему он не значительно больше, чем тот, который слева? Аналогично, если вы откроете инструменты для разработчиков и измените перспективу на огромное количество, например, 10000px, куб останется такого же размера. Разве это не должно быть крошечным?

Вот код: Это не мое, так что вся заслуга 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> 

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

Answer 1

Вы должны понимать, что какие изменения это перспектива, а не масштаб.

когда вы спросите

В этом случае правильный куб должен быть 750px ближе к пользователю, так почему это не значительно больше, чем на левой?

Что вам нужно, чтобы подумать, что вы на 750 пикселей ближе, чтобы рассчитать перспективу, а не РАЗМЕР.

Ключ эта часть в спецификации:

Каждый 3D элемент с г> 0 становится больше; каждый 3D-элемент с г < 0 становится меньше

Ваш куб с центром в начале координат (Вы даете каждому лицу подобное движение, в oposite направлениях). Это означает, что центр куба (хорошо, там ничего нет, но получите концепцию) будет поддерживать тот же размер.

Аналогично, если вы представляете плоскость z, она режет куб более или менее в половине. В этой плоскости нет изменения измерения.

Передняя грань действительно увеличивается, а задняя сторона действительно уменьшается (на небольшие суммы). Это легче увидеть в линиях, которые попадают в более близкую вершину или в самой большой вершине