Pessoal, procurei nas dúvidas já postadas, mas não encontrei a solução (ainda). Será que alguém consegue ajudar?
Consegui criar as palavras conforme os exemplos e coloca-las corretamente. Mas quando efetuo a rollagem da página, nada acontece. Olhei o projeto final e não consegui encontrar o erro! :(
<html>
<head>
<!-- title é para aparecer como nome da aba -->
<title>Principal</title>
<!-- serve para codificacao unit 8 - aceita acentos -->
<meta charset="utf-8">
<!-- icone que aparece na aba -->
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="index.css">
<!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<!-- carrega a fonte Open Sans Condensed na versão negrito, -->
<!-- que é a única necessária para os cabeçalhos -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<header class="titulo-principal">
<div class=index>
<img class=img src="eu.jpg" alt="Foto do João da Silva">
<h1 class=nome>João da Silva</h1>
<h6 class=desenvweb> Desenvolvedor WEB</h6>
<a class="banner-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
<ul class="palavras-home">
<li class="palavra java" > java </li>
<li class="palavra eficiencia"> eficiencia </li>
<li class="palavra web" > web </li>
<li class="palavra agilidade" > agilidade </li>
<li class="palavra css"> css </li>
<li class="palavra html"> html </li>
<li class="palavra inovacao"> inovacao</li>
</ul>
</div>
</header>CSS >>>>>>>>>>>>>>
body{
overflow-x: hidden;
-webkit-perspective: 6px;
perspective: 6px;
-webkit-perspective-origin: 50% 160px;
perspective-origin: 50% 160px;
}
.index{
/*! background-color eh para o fundo do h1, pode colocar rgb(0,0,0) ou em hexadecimal*/
background: linear-gradient( rgb(10, 30, 90), rgb(110, 10, 70));
/*! color eh para a letra do h1, pode colocar rgb(0,0,0) ou em hexadecimal*/
color: #FAFFFF;
/* text-align serve para colocar uma posicao no texto*/
text-align: center;
/* serve para dizer qual a fonte que iremos utilizar
ele tenta uma (open sans) caso nao consiga, vai para a proxima (arial) e se nao der, ele busca uma fonte com o estilo
que pedi (sans serif - sem a voltinhas nas letas) */
font-family: "Open Sans", sans-serif;
/* serve para colocar espaco na letra, nesse exemplo, foi entre as bordas do h1 e a letra*/
padding: 50px;
/* serve para colocar uma faixa (bordar) na parte de baixo do titulo*/
border-bottom: 6px solid rgb(50, 50, 70);
/* serve para colocar o texto em maiúsculo */
text-transform: uppercase;
font-weight: bold;
}
.banner-twitter {
width: 14em;
line-height: 1;
padding: 1em 10px;
box-sizing: border-box;
text-align: center;
text-decoration: none;
background-color: #3C1D3D;
color: white;
border: .25em solid black;
font-size: 1.2em;
font-family: "Open Sans Condensed", sans-serif;
top: 0;
right: 0;
position: absolute;
transform-origin: 0 0;
transform: translate(6.5765em, -2.4745em) rotate(45deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.titulo-principal {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.nome{
text-shadow: -5px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
font-size: 55px;
color: aliceblue;
}
.desenvweb{
font-size: 0.89rem;
letter-spacing: 0.5rem;
}
.divprincipal {
margin-left: 300px;
margin-top: 50px;
padding: 10px;
letter-spacing: 2px;
line-height: 1.5;
color: #505050;
}
.divnome{
color: black;
font-size: 60px;
}
.sites{
margin-left: 500px;
margin-bottom: 50px;
color: #505050;
font-size: 1.9rem;
}
.botao{
background: linear-gradient( rgb(10, 30, 90), rgb(110, 10, 70));
color: white;
padding: 10px;
border: 4.5px solid rgb(50, 50, 70);
line-height: 10.5;
margin-left: 450px;
}
.veja{
background: linear-gradient( rgb(10, 30, 90), rgb(110, 10, 70));
color: white;
border: 4.5px solid rgb(50, 50, 70);
line-height: 15.5;
margin-left: 450px;
font-size: 1.5rem;
padding: 15px;
border-radius: 10px 0;
text-align: center;
}
.ola{
font-size: 90px;
color: silver;
}
.posts{
font-size: 0.8rem;
}
.uper{
text-transform: uppercase;
color: rgb(110, 10, 70);
font-size: 55px;
text-shadow: #404040 2px 3px 2px;
letter-spacing: 2px;
}
.trabalho{
background-color: rgb(70,50,100);
margin-bottom: 100px;
font-size: 2rem;
letter-spacing: 0.3rem;
font-family: sans-serif;
color: white;
text-transform: uppercase;
border-top: 8px solid rgb(0,0,0);
padding: 2rem;
height: 35rem;
margin-bottom: 0px;
}
.blog{
background-color: rgb(130,130,130);
font-size: 3rem;
letter-spacing: 0.3rem;
font-family: sans-serif;
color: white;
text-transform: uppercase;
padding: 2rem;
border-top: 8px solid #000;
height: 35rem;
position: relative;
}
.contato{
background-color: rgb(20,20,10);
font-size: 3rem;
letter-spacing: 0.3rem;
font-family: sans-serif;
color: white;
text-transform: uppercase;
padding: 20rem;
border-top: 8px solid rgb(100,0,0);
}
h2 {
font-size: 40px;
font-family: "Open Sans", "Arial", sans-serif;
background-color: rgb(245, 255, 255);
/* serve para dizer q nao deve ter float nessa tag - linha*/
clear: both;
}
.desenvweb{
font-style: italic;
}
body{
background-color: #F2FFFC;
font-family: "Crimson text", serif;
font-size: 1.2rem;
/* serve para colocar espacos entre as linhas*/
line-height: 1.5;
}
main{
float: left;
width: 100%;
}
.img{
right: 30em;
top: 1rem;
height: 150px;
border-radius: 30px / 80px;
}
.jobs{
right: 50rem;
height: 180px;
margin-top: 5rem;
margin-left: -14px;
border-bottom: 5px solid #000;
border-top: 5px solid #000;
}
.imagens{
margin-left: 3rem;
}
.bmw{
border-left: 5px solid #000;
}
.ibm{
border-right: 5px solid #000;
}
footer{
background-color: rgb(0,0,0);
color: #F2FFFC;
clear: both;
position: fixed;
bottom: 0;
width: 100%;
}
.iniciopost{
background-color: rgb(120,120,120) ;
color: #000;
position: absolute;
top: 10rem;
right: 2rem;
padding: 1rem;
height: 10rem;
width: 40rem;
font-family: "Open Sans", sans-serif;
}
.email{
color: red;
}
strong {
font-weight: bold;
}
.blogtext{
font-size: 1rem;
padding: 1rem;
}
.post1{
margin-top: 5rem;
}
.leia {
font-size: 25px;
font-weight: bold;
}
.imagens > img{
-webkit-transition: all 1.2s cubic-bezier(.1000, 1.000, .2000, 1.000);
-moz-transition: all 1.2s cubic-bezier(.1000, 1.000, .2000, 1.000);
-ms-transition: all 1.2s cubic-bezier(.1000, 1.000, .2000, 1.000);
-o-transition: all 1.2s cubic-bezier(.1000, 1.000, .2000, 1.000);
transition: all 1.2s cubic-bezier(.1000, 1.000, .2000, 1.000);
}
.imagens:hover > img{
-webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-ms-transform: scale(1.04);
-o-transform: scale(1.04);
transform: scale(1.04);
}
.goto-top{
background:RGB(100,100,100) url('../img/ico/goto-top.png?1415383427') 14px 21px no-repeat;
color:#f0f0f0;
display:none;
font:13px "proxima-nova-regular",Arial,Tahoma,Verdana,sans-serif;
padding:20px 10px 10px 10px;
position:fixed;
right:1px;
bottom:0;
height:60px;
text-decoration:none;
text-transform:uppercase;
z-index:99999;
-moz-transition:background-color 2.25s linear;
-o-transition:background-color 2.25s linear;
-webkit-transition:background-color 2.25s linear;
transition:background-color 2.25s linear;
-moz-border-radius-topleft:20px;
-webkit-border-top-left-radius:2px;
border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-webkit-border-top-right-radius:2px;
border-top-right-radius:2px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.goto-top:hover{
background-color:#557d93;
}
.palavras-home {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
}
.palavra{
/*text-shadow: -0px 0px black, 5px 3px black, 3px 0 black, 0 -1px black;*/
font-family: "Shadows Into Light", cursive;
font-weight: bold;
font-size: 400%;
color: #D5447E;
position: absolute;
}
.eficiencia {
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg) scale(.25);
}
.java{
top: 70%;
left: 20%;
-webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
}
.inovacao{
top: 45%;
left: 25%;
-webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg) scale(.25);
}
.web{
top: 55%;
left: 35%;
-webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
}
.agilidade{
top: 30%;
left: 65%;
-webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
}
.css{
top: 15%;
left: 60%;
-webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg) scale(.25);
}
.html{
top: 30%;
left: 35%;
-webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg) scale(.25);
}OBS: faço algumas anotações no código, pfv, ignorem, rs. OBS2: adicionei alguns elementos na página (exemplo: go to TOP)
