POSITION: FIXED no cabeçalho não funciona com

Queria por um cabeçalho fixo no topo da tela e usar o efeito paralax para estilização da página mas não consigo, não sei se estou fazendo errado. O paralax está sendo executado mas o cabeçalho não fica fixo, se eu retirar perspective: 4px do body, o cabeçalho fica fixo mais o paralax não funciona.

Ex: código simples...

insira seu código aqui
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/paralax.css">
        <title>Teste Paralax</title>
    </head>
    <body class="principal">
        <div class="cabecalho">
            Cerama transportes LTDA.
        </div>
        <header class="palavrasHome">
            <ul class="paralax">
                <li class="links amador"><a href="#">Amador</a></li>
                <li class="links programacao"><a href="#">Programação</a></li>
                <li class="links html"><a href="#">Html</a></li>
                <li class="links codigo"><a href="#">Código</a></li>
                <li class="links esforcos"><a href="#">Esforço</a></li>
                <li class="links dedicacao"><a href="#">Dedicação</a></li>
            </ul>
        </header>
    </body>
    <footer class="rodape">
        teste
    </footer>
</html>

html, body{
    height: 100%;
     overflow-x: hidden;
}

body{
    perspective: 4px;
    perspective-origin: 50% 180px;
}

.cabecalho{
    perspective: none;
    width: 100%;
    height: 100px;
    background-color: beige;
    position: fixed;    

}

.principal{
    background-color: darkcyan;
}

.palavrasHome{
    width: 100%;
    height: 900px;
    position: relative;
}

.links{
    position: absolute;

}

.links a{
    text-decoration: none;
    color: white;
}

.amador{
    left: 250px;
    top: 100px;
    transform: translateZ(1px) scale(0.8);
}

.programacao{
    left: 200px;
    top: 350px;
    transform: translateZ(2px) scale(1.0);
}

.html{
    left: 500px;
    top: 200px;
    transform: translateZ(3px) scale(0.8);
}

.codigo{
    left: 600px;
    top: 350px;
    transform: translateZ(4px) scale(1.3);
}

.esforcos{
    left: 800px;
    top: 200px;
    transform: translateZ(1px) scale(0.8);
}

.dedicacao{
    left: 900px;
    top: 400px;
    transform: translateZ(2px) scale(0.8);
}

.rodape{
    width: 100%;
    height: 300px;
    background-color: blue;
}