Boa tarde, ainda não consegui entender ao certo o que esta propriedade esta fazendo na prática, como assim criando uma perspectiva? O valor colocado de 6px, o que isso gera?
Obrigado
Solucionado
Boa tarde, ainda não consegui entender ao certo o que esta propriedade esta fazendo na prática, como assim criando uma perspectiva? O valor colocado de 6px, o que isso gera?
Obrigado
Olá, Bruno! Tudo bem, cara? =)
Teve um aluno que estava com uma dúvida semelhante, referente às propriedades perspective e perspective-origin, aqui. Dá uma olhada lá, por favor, e me avisa se é suficiente. =)
Se não for, eu tento formular uma outra resposta para você. =)
Abraços,
Fábio
Olá Fábio, obrigado pelo retorno.
Bom vamos la..srrs, Referente ao Perspective, com sua explicação ficou bem mais claro. Fiz testes mudando os px e consegui visualizar o que ele esta fazendo na prática :).
Agora o perspective-origin ainda não consegui compreender, o que esses valores descritos no exercício significam "perspective-origin: 50% 160px;"
Outra dúvida é sobre o "transform-style: preserve-3d;". No exercício final eu omiti essa propriedade e continuou a funcionar. Desci o scroll e as palavras subiram corretamente.
Bruno,
Essa explicação tem que dar uma abstraída... Vai parecer meio maluco, ok? Hahaha.
Antes de entrar de fato na explicação, vou tentar usar um exemplo... Feche um dos seus olhos e olha para a tela do computador. Com o olho fechado, olhe para o computador de diferentes "pontos de vista", isto é, mexa sua cabeça para olhar de vários lugares diferentes... Você vai ver que a imagem é diferente de cada lugar, pois há iluminação do ambiente, reflexo, etc...
O seu olho pode ser comparado à perspective-origin... Os valores que você passa para ele são as coordenadas...
perspective-origin: 50% 160px;O que acabamos de dizer é que a origem será 50% na horizontal, ou seja, na metade horizontal da tela e há 160px de distância do topo. Tenta pensar num ponto que corresponda a essas coordenadas na tela! =)
Já a propriedade transform-style indica se os filhos devem estar no mesmo plano do elemento ou se devem ser posicionados num espaço tridimensional. Os valores podem ser preserve-3d ou flat. =)
Agora, sobre o fato de ter funcionado mesmo sem essa propriedade eu não sei o que houve. Rs... Você pode postar seu HTML e seu CSS aqui, para eu dar uma olhada? =)
Ahh, não se esqueça que quando for colocar um código, você pode usar o botão "Inserir código", para facilitar a leitura. =)
Fábio
Oi Fábio, vlw pela explicação, não achei nada maluco nao :). Agora só não ficou claro essa parte "160px de distância do topo" Que topo?rsrs
Seguem o html e css sem o transform-style: preserve-3d;
<!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">
<a class="banner-twitter" href="http://twitter.com/joaodasilva">Siga-me no Twitter</a>
<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>
<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>
<main>
<section class="secao-inicio saudacao">
<p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
<a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
</section>
<section class="secao-inicio trabalhos">
<h2>Trabalhos</h2>
<ul>
<li><img src="imagens/bmw.png" alt="Site da BMW"></li>
<li><img src="imagens/ibm.png" alt="Site da IBM"></li>
<li><img src="imagens/uol.png" alt="Site da UOL"></li>
</ul>
<a class="botao-index" href="portfolio.html">Veja mais</a>
</section>
<section class="secao-inicio blog">
<h2>Blog</h2>
<small>Últimos posts</small>
<ol>
<li class="mais-recente">
<a href="blog.html">O essencial de design responsivo</a>
<p class="inicio-post">
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?
</p>
</li>
<li>
<a href="blog.html">Por que fazer páginas acessíveis?</a>
</li>
<li>
<a href="blog.html">JavaScript não obstrusivo</a>
</li>
</ol>
<a class="botao-index" href="blog.html">Veja mais</a>
</section>
</main>
<footer>
<h2>Vamos conversar?</h2>
<p>Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>
</footer>
</body>
</html>html, body {
height: 100%;
overflow-x: hidden;
}
body {
perspective: 6px;
perspective-origin: 50% 160px;
}
.foto-home {
height: 200px;
border-radius: 50%;
}
.saudacao p {
font-size: 1.5em;
color: #99A;
line-height: 1;
padding: 2em;
}
.saudacao-inicio {
font-size: 3em;
color: #889;
}
.saudacao-ultima-linha {
text-align: right;
display: block;
}
.saudacao strong {
font-size: 2em;
color: #000;
}
.saudacao em {
color: #851944;
font-size: 4em;
-webkit-transform: rotate(-5deg) skew(-10deg);
transform: rotate(-5deg) skew(-10deg);
display: inline-block;
}
.botao-index {
font-size: 1.25em;
background-color: #851944;
color: #FFF;
padding: .5em;
border: .2em solid black;
width: 40ch;
margin: 2em auto;
display: block;
text-align: center;
}
.secao-inicio {
padding: 2em;
}
.secao-inicio h2 {
font-size: 3em;
text-transform: uppercase;
margin-bottom: .5em;
}
.trabalhos {
background-color: #3C1D3D;
border-top: .5em solid #000;
border-bottom: .5em solid #000;
}
.trabalhos h2 {
color: #FFF;
}
.trabalhos ul {
overflow: hidden;
border: .5em solid black;
}
.trabalhos li {
float: left;
width: 33.333%;
}
.trabalhos img {
width: 100%;
display: block;
}
.blog {
background-color: #999;
position: relative;
color: #FFF;
border-bottom: .5em solid #851944;
}
.blog small {
position: relative;
top: -2em;
}
.blog li {
width: 30%;
}
.blog li a {
color: #FCF;
padding: .5em;
display: block;
}
footer {
background-color: #000;
color: #FFF;
padding: 2em;
}
footer h2 {
font-size: 3em;
}
footer a {
color: #F99;
}
main {
width: 100%;
padding-bottom: 0;
float: none;
}
.palavras-home li{
font-size: 400%;
}
.palavras-home {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.palavra-home {
font-family: "Shadows Into Light", cursive;
font-weight: bold;
color: #D5447E;
position: absolute;
}
.eficiencia {
top: 50%;
left: 60%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px) scale(0.25);
}
.boas-praticas {
top: 70%;
left: 20%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(1px) scale(0.25);;
}
.codigo-limpo {
top: 45%;
left: 25%;
transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px) scale(0.25);;
}
.css3 {
top: 55%;
left: 35%;
transform: translate(-50%, -50%) rotate(5deg) translateZ(2px) scale(0.25);;
}
.html5 {
top: 30%;
left: 65%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);;
}
.javascript {
top: 15%;
left: 60%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px) scale(0.25);;
}
.acessibilidade {
top: 30%;
left: 35%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px) scale(0.25);;
}
.responsivo {
top: 40%;
left: 40%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(3px) scale(0.25);;
}
.otimizacoes {
top: 70%;
left: 65%;
transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px) scale(0.25);;
}
.agilidade {
top: 75%;
left: 35%;
transform: translate(-50%, -50%) rotate(5deg) translateZ(1px) scale(0.25);;
}
.design {
top: 40%;
left: 60%;
transform: translate(-50%, -50%) rotate(10deg) translateZ(2px) scale(0.25);;
}
.titulo-principal {
position: relative;
}
.banner-twitter {
position: absolute;
top: 0;
right: 0;
padding: 1em 0;
border: .25em solid black;
background-color: #3C1D3D;
color: #FFF;
text-decoration: none;
width: 14em;
line-height: .5em;
transform-origin: 0 0;
transform: translateX(46%) translateY(-70%) rotate(45deg) ;
}
.blog .inicio-post {
position: absolute;
top: 4em;
height: 8em;
left: 30%;
right: 4em;
background-color: #F2FFFC;
color: #000;
padding: 1.5em;
}
.blog .mais-recente {
background-color: #F2FFFC;
}
.blog .mais-recente a {
color: #F26;
}
Bruno,
Os 160px são referentes ao elemento que possui a propriedade. No caso, colocamos perspective e perspective-origin no <body>, então o ponto de origem será metade da largura do <body> e 160px à partir do topo dele, também. =)
Eu vou fazer uns testes com seu código para ver se descubro o que aconteceu... Enquanto isso, você tem mais alguma dúvida com relação ao resto? =)
Ahh, e só mais uma coisa, qual browser você está usando? transform-style ainda é uma tecnologia experimental, se não me engano, então quer dizer que nem todos os browsers podem ter suporte à ele.
Abraço,
Fábio
Oi Fábio, agora sim entendi tudo( ufa!!). Estou usando o Chrome na versão 55.
A ultima dúvida na verdade é uma curiosidade, esta forma como foi abordada no curso, seria a forma mais fácil/eficaz de fazer um efeito de paralax?
Olá, Bruno!
Não sei se é a forma mais eficaz de se fazer, pois é possível conseguir parallax utilizando JavaScript, também. Mas acredito que seja a mais fácil, sim. =)
E sobre o transform-style: preserve-3d, não encontrei uma resposta para você... Posso ficar devendo essa? Rs. Assim que eu souber de algo eu lhe aviso!
Abraço,
Fábio
Oi Luccas, no seu browser funcionou o meu código? Cara se funcionou sem o preserve-3d, talvez essa propriedade tenha sofrido alteração e tenha talvez virado esse valor por default. De qualquer forma, se achar me avise, aguardo uma reposta então. Muito obrigado :)