Criei um arquivo de teste para tentar implementar o paralax, mas não está dando certo. O código é:
Index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paralax</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="fundo">
<ul class="uldaspalavras">
<li class="palavras-home numero1">numero1</li>
<li class="palavras-home numero2">numero2</li>
<li class="palavras-home numero3">numero3</li>
<li class="palavras-home numero4">numero4</li>
</ul>
</div>
</body>
</html>CSS:
html{
font-size: 120%;
}
html,body{
overflow-x: hidden;
height: 100%;
}
body{
-webkit-perspective: 6px;
perspective: 6px;
-webkit-perspective-origin: 50% 80px;
perspective-origin: 50% 80px;
}
.fundo {
background-color: #333;
position: relative;
width: 68rem;
height: 40rem;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.uldaspalavras {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
}
.palavras-home {
color: #FFF;
font-family: 'Roboto', sans-serif;
font-size: 4rem;
position: absolute;
}
.numero1{
top: 30%;
left: 35%;
-webkit-transform: translate(-50%, -50%) translateZ(-3px) scale(.30);
transform: translate(-50%, -50%) translateZ(-3px) scale(.30);
}
.numero2{
top: 40%;
left: 40%;
-webkit-transform: translate(-50%, -50%) translateZ(3px) scale(.25);
transform: translate(-50%, -50%) translateZ(3px) scale(.25);
}
.numero3{
top: 20%;
left: 65%;
-webkit-transform: translate(-50%, -50%) translateZ(2px) scale(.25);
transform: translate(-50%, -50%) translateZ(2px) scale(.25);
}
.numero4{
top: 45%;
left: 35%;
-webkit-transform: translate(-50%, -50%) translateZ(1px) scale(.25);
transform: translate(-50%, -50%) translateZ(1px) scale(.25);
}