Não consigo reproduzir o Parallax | HTML5 e CSS3 II: Turbinando as suas páginas

Alguém por favor poderia me ajudar? Já tentei de tudo para conseguir fazer com que o parallax funcione mas não obtive sucesso até o momento.

Meu HTML está da seguinte forma:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Paralaxe - Estudo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="inicio">
        <div class="desenhos">
           <div class="desenho quadrado"></div>
           <div class="desenho circulo"></div>
           <div class="desenho triangulo"></div>
        </div>
    </header>

    <main class="conteudo-principal">
        <div class="palavras">
            <div class="palavra teste1">
                <h1>TESTE1</h1>
            </div>
            <div class="palavra teste2">
                <h1>TESTE2</h1>
            </div>
            <div class="palavra teste3">
                <h1>TESTE3</h1>
            </div>
        </div>
    </main>

</body>
</html>

O CSS encontra-se desta maneira:

* {
    margin: 0;
    padding: 0;
    border: 0;     
}

body {
    perspective: 6px;    
}

.inicio {
    position: relative;
    height: 550px;
    background-color: crimson;
    transform-style: preserve-3d;
}

.conteudo-principal {
    background-color: darkslategray;
    height: 650px;    
}
.desenhos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.desenho {
    background-color: white;
    width: 400px;
    height: 400px;
    position: absolute;
}

.quadrado {
    top: 45%;
    right: 23%;
    transform: translate(-50%, -50%) translateZ(4px) scale(.25);
}

.circulo {
    top: 33%;
    left: 16%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) translateZ(-1px) scale(.25);
}

.triangulo {
    background-color: transparent;
    width: 0px;
    height: 0px;
    top: 66%;
    left: 46%;
    border-bottom: 100px solid white;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;  
    transform: translate(-50%, -50%) translateZ(2px) scale(.25);
}

.palavra { 
    text-align: center;
    margin-bottom: 20px;
}

Até o momento estou realizando testes para aplicar o parallax somente no HEADER INICIO, ou seja, nos DESENHOS.

Além dos desenhos ficarem para fora da tela após aplicar o "perspective" no body, as outras formas que testei também não funcionaram (mesmo já com os desenhos aparecendo)

Alguém por favor poderia me ajudar e até mesmo explicar a minha falha?

Levi, muito obrigado pela sua atenção, meu caro.

Eu consegui resolver o problema algumas horas depois, o seu código foi uma de minhas tentativas anteriormente, é muito válida, pois realmente estava faltando em meu código.

Após ler mais um pouco sobre perspectivas e tais efeitos utilizando CSS, percebi que eu havia entendido errado sobre a propriedade PERSPECTIVE. Eu havia pensado em deslocamento dos itens para frente e para trás da tela, mas não levei em conta que isso fosse na forma de um CONE, por esse motivo meus objetos "saiam da tela". Nesse momento meu parallax já estava funcionando, porém eu não conseguia ver os objetos. Após entender definitivamente, ajustei o valor utilizado para a PERSPECTIVE e os elementos na tela, dessa forma tudo funcionou. Como já era esperado por mim, foi uma falha minha.

AGRADEÇO DEMAIS A SUA ATENÇÃO E SEU TEMPO.

Chegou a hora de transformar