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

Trabalhos

Blog

1. 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?

2. Por que fazer páginas acessíveis?
3. JavaScript não obstrusivo

Vamos conversar?

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