Olá, eu fiz conforme o resultado, porém no meu só a palavra Responsive que se move no parallax... Alguém pode me ajudar? Segue o código: CSS: html{ height:100%; overflow-x: hidden; }

body{ perspective:6px; pespective-origin:50% 160px; transform-style: preserve-3d; height: 100%; overflow-x: hidden; }

.foto-home { height: 200px; border-radius: 0 50%; /Outra forma de usar o radius é:; .foto-home { border-top-right-radius: 50%; border-bottom-left-radius: 50%; }/ } .saudacao p { font-size: 1.5rem; color: #99A; line-height: 1; padding: 2rem; } .saudacao-inicio { color: #889; font-size: 3rem; } .saudacao-ultima-linha { text-align: right; display: inline-block; } .saudacao strong { color: #000; font-size: 2rem; } .saudacao em { color: #851944; font-size: 4rem; } .botao-index { background-color: #851944; color: #FFF; border: .2em solid black; width: 300px; display: block; text-align: center; font-size: 1.125rem; margin: 2rem auto; padding:0.5rem; text-align: center; }

.secao-inicio { padding: 2rem; } .secao-inicio h2 { font-size: 3rem; text-shadow: 2px 2px #000; text-transform: uppercase; margin-bottom: .5rem; }

.trabalhos { background-color: #3C1D3D; border-top: 10px solid #000; border-bottom: 10px solid #000; padding: 20px 30px ; } .trabalhos h2 { color: #FFF; } .trabalhos h1 { color: #FFF; float:left; margin-bottom: 20px; } .trabalhos ul { overflow: hidden; border: .5rem solid black; clear:both; } .trabalhos li { float: left; width: 33.333%; } .trabalhos img { width: 100%; display: block; } .blog { background-color: #999; color: #FFF; border-bottom: .5rem solid #851944; text-align: left; padding: 1.25rem 1.18rem ; position: relative; } .blog li a { color: #FCF; padding:.5rem; display: block; }

.blog h2 { color: #FFF; font-size: 25px; } .blog h1 { color: #FFF; float:left; clear:both; }

.blog ol{ clear:both; }

footer { background-color: #000; color: #FFF; padding: 2em; } footer a { color: #F99; }

main { width: 100%; padding-bottom: 0; float: none; }

.inicio-post{ width:820px; top:2rem; background-color: #fafafa; color:blue; height: 5rem; position:absolute; float:right; left: 18em; padding: 1rem; }

header { position: relative; }

/ -- Palavras -- /

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

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

.eficiencia { position: absolute; top: 55%; left: 62%; font-family: 'Shadows Into Light', cursive; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25); }

.boas-praticas{ position: absolute; top: 70%; left: 20%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25); }

.codigo-limpo{ position: absolute; top: 45%; left: 15%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(0.25px) rotate(-10deg) scale(.25) }

.css3{ position: absolute; top: 39%; left: 33%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.35px) rotate(-10deg) scale(.45); transform: translate(-50%, -50%) translateZ(0.35px) rotate(-10deg) scale(.45) }

.html5{ position: absolute; top: 30%; left: 70%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.35px) rotate(-10deg) scale(.65); transform: translate(-50%, -50%) translateZ(0.35px) rotate(-10deg) scale(.65) }

.javascript{ position: absolute; top: 15%; left: 60%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.30); transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.30) }

.acessibilidade{ position: absolute; top: 20%; left: 35%; font-family: 'Shadows Into Light', cursive; font-size: 5px; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25); transform: translate(-50%, -50%) translateZ(0.25px) rotate(-5deg) scale(.25) }

.responsivo{ position: absolute; top: 45%; left: 73%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(1.45px) rotate(-10deg) scale(.25); transform: translate(-50%, -50%) translateZ(1.45px) rotate(-10deg) scale(.25) }

.otimizacoes{ position: absolute; top: 70%; left: 65%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.35px) rotate(-10deg) scale(.25); transform: translate(-50%, -50%) translateZ(0.35px) rotate(-10deg) scale(.25); }

.agilidade{ position: absolute; top: 70%; left: 35%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.25px) rotate(-10deg) scale(.30); transform: translate(-50%, -50%) translateZ(0.25px) rotate(-10deg) scale(.30) }

.design{ position: absolute; top: 28%; left: 20%; font-family: 'Shadows Into Light', cursive; font-size: 1.2rem; color:#D5447E; -webkit-transform: translate(-50%, -50%) translateZ(0.45px) rotate(-15deg) scale(.45); transform: translate(-50%, -50%) translateZ(0.45px) rotate(-15deg) scale(.45) }

transformada{

width:100px; height: 100px; background-color: yellow; border:2px solid #000; -webkit-transform: skew(20deg) rotate(30deg) scale(1.5); transform: skew(20deg) rotate(30deg) scale(1.2);}

.transform { width:110px; height: 110px; background-color: red; border:2px solid #000; transform: translateX(300px) rotate(45deg) scale(1.5); }

.saudacao em{ color: #851944; font-size: 4em; transform: rotate(-5deg) skew(-10deg); display: inline-block; }

.banner-twitter { width: 14rem; line-height: 1; padding: 1rem 0; box-sizing: border-box; text-align: center; text-decoration: none; background-color: #3C1D3D; color: white; border: .25rem solid black; font-size: 1.2rem; font-family: "Open Sans Condensed", sans-serif; position: absolute; top: 0; right: 0; transform-origin: 0 0; transform: translate(6.5765rem, -2.4745rem) rotate(45deg); }

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

/cubo/

.face{ display: block; width: 200px; height: 200px; position: absolute; top: 0; left: 0; }

.frente{ background-color: ; transform: translateZ(100px); }

.direita{ background-color: blue; transform: translateX(100px) rotateY(90deg); }

.esquerda{ background-color: yellow; transform: translateX(-100px) rotateY(-90deg); }

.baixo{ background-color: green; transform: translateY(100px) rotateX(90deg); }

.cima{ background-color: magenta; transform: translateY(-100px) rotateX(90deg); }

.tras{ background-color: cyan; transform: translateZ(-100px) rotateY(180deg); }

.cubo{ transform-style: preserve-3d; position:relative; width: 200px; height: 200px; top: 100px; left: 100px; transform: rotateX(10deg) rotateY(10deg); }

HTML: <!DOCTYPE html>

João da Silva

Desenvolvedor web

Eficiência
Boas práticas
Código limpo
CSS3
HTML5
JavaScript
Acessibilidade
Responsivo
Otimizações
Agilidade
Design

Olá, meu nome é João da Silvae eu construo sites maravilhosos

Conheça mais um pouco sobre mim

teste

Trabalhos

Veja mais

Blog

Últimos posts

O essencial de design responsivo
Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
Por que fazer páginas acessíveis?
JavaScript não obstrusivo

Veja mais

Vamos conversar?

Você pode entrar em contato comigo por e-mail ou pelo telefone (12) 3456-7890