Palavras ficam fora da tela ao aplicar os estilos | HTML5 e CSS3 II: Turbinando as suas páginas

Fiz todo o procedimento de inclusão de CSS e das classes, porém algumas palavras estão ficando fora do header. Olhei aqui no fórum, mas não consegui solucionar o meu problema. Abaixo segue o código?

HTML

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <title>João da Silva - Desenvolvedor Web</title>
    <link rel="shortcut icon" href="imagens/favicon.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/site.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
</head>

<body>
    <header class="titulo-principal">
        <img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
        <h1>João da Silva</h1>
        <p class="subtitulo-principal">Desenvolvedor web</p>
        <a class="banner-fb" href="www.facebook.com/wellingtonslima">Siga-me no Facebook</a>
        <ul class="palavras-home">
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>

    </header>

CSS

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

body{
    perspective: 6px;
    perspective-origin: 50% 160px;
}

header{
    position: relative;
}

.banner-fb{
    color: #FFFFFF;
    border: 5px solid #000000;
    background-color: #812084;
    padding: .3em 3em .3em 3em;
    font-size: .4em;
    font-family: "Shadows Into Light";
    position: absolute;
    text-decoration: none;
    top: 0;
    right: 0;
    box-sizing: border-box;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform:
        translateX(6.95em)
        translateY(-2.95em)
        rotate(45deg);
    transform:
        translateX(6.95em)
        translateY(-2.95em)
        rotate(45deg);

}

.palavra-home{
    position: absolute;
    font-family: "Shadows Into Light";
    color: #D5447E;
    font-weight: bold;
    font-style: italic;
    font-size: .5em;
}

.palavras-home, .titulo-principal{
    transform-style: preserve-3d;
}

.palavras-home{
    perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.palavras-home li{
    font-size: 200%;
}

.eficiencia{
    top: 50%;
    left: 70%;
    -webkit-transform:
        rotate(15deg)
        translate(-50%, -50%)
        translateZ(2px);
    transform:
        rotate(15deg)
        translate(-50%, -50%)
        translateZ(2px)
        scale(0.25);
}

.boas-praticas{
    top: 55%;
    left: 35%;
    -webkit-transform:
        rotate(10deg)
        translate(-50%, -50%)
        translateZ(1px);
    transform:
        rotate(10deg)
        translate(-50%, -50%)
        translateZ(1px)
        scale(0.25);;
}

.codigo-limpo{
    top: 30%;
    wid
    left: 60%;
    -webkit-transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(3px);
    transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(3px)
        scale(0.25);;
}

.css3{
    top: 25%;
    left: 44%;
    -webkit-transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(3px);
    transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(3px)
        scale(0.25);;
}

.html5{
    top: 15%;
    left: 62%;
    -webkit-transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(1px);
    transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(1px)
        scale(0.25);;
}

.javascript{;
    top: 20%;
    left: 30%;
    -webkit-transform:
        rotate(-10deg)
        translate(-50%, -50%)
        translateZ(2px);
    transform:
        rotate(-10deg)
        translate(-50%, -50%)
        translateZ(2px)
        scale(0.25);;
}

.acessibilidade{
    top: 50%;
    left: 80%;
    -webkit-transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(1px);
    transform:
        rotate(-15deg)
        translate(-50%, -50%)
        translateZ(1px)
        scale(0.25);;
}

.responsivo{
    top: 55%;
    left: 30%;
    -webkit-transform:
        rotate(10deg)
        translate(-50%, -50%)
        translateZ(2px);
    transform:
        rotate(10deg)
        translate(-50%, -50%)
        translateZ(3px)
        scale(0.25);;
}

.otimizacoes{
    top: 70%;
    left: 65%;
    -webkit-transform:
        rotate(10deg)
        translate(-50%, -50%)
        translateZ(1px);
    transform:
        rotate(10deg)
        translate(-50%, -50%)
        translateZ(1px)
        scale(0.25);;
}

.agilidade{
    top: 55%;
    left: 34%;
    -webkit-transform:
        rotate(-10deg)
        translate(-50%, -50%)
        translateZ(1.5px);
    transform:
        rotate(-10deg)
        translate(-50%, -50%)
        translateZ(1.5px)
        scale(0.25);;
}

.design{
    top: 15%;
    left: 75%;
    -webkit-transform:
        rotate(-5deg)
        translate(-50%, -50%)
        translateZ(1px);
    transform:
        rotate(-5deg)
        translate(-50%, -50%)
        translateZ(1px)
        scale(0.25);;
}