Quando eu apliquei as mudanças no CSS, para que houvesse a perspectiva 3D não ocorreu nada e pelo contrario ao invés delas aumentarem de tamanho, diminuíram.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Quando eu apliquei as mudanças no CSS, para que houvesse a perspectiva 3D não ocorreu nada e pelo contrario ao invés delas aumentarem de tamanho, diminuíram.
Olá Marcelo! Poste o seu código aqui pra gente dar uma olhada.
Olá André! Este é meu código... Eu consegui deixar as palavras grandes, porém o "position: absolute;" não está surtindo o efeito esperado, e está jogando as palavras para o canto esquerdo...
HTML:
<ul class="palavra-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>
CSS:
html, body{
overflow-x: hidden;
height: 100%;
}
body{
-webkit-perspective: 6px;
perspective: 6px;
-webkit-perspective-origin: 50% 160px;
perspective-origin: 50% 160px;
}
.palavras-home {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
bottom: 0;
right: 0;
top: 0;
left: 0;
}
.palavra-home {
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);
}
.boas-praticas {
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);
}
.codigo-limpo {
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);
}
.css3 {
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);
}
.html5 {
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);
}
.javascript {
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);
}
.acessibilidade {
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);
}
.responsivo {
top: 40%;
left: 40%;
-webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
transform: translate(-50%, -50%) translateZ(3px) rotate(10deg) scale(.25);
}
.otimizacoes {
top: 70%;
left: 65%;
-webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg) scale(.25);
}
.agilidade {
top: 75%;
left: 35%;
-webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
transform: translate(-50%, -50%) translateZ(1px) rotate(5deg) scale(.25);
}
.design {
top: 40%;
left: 60%;
-webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
}
Essa lista está dentro de qual elemento? Verifique se o elemento que contém a lista está com o código abaixo:
.classe_do_elemento {
width: 100%;
box-sizing: border-box;
transform-style: preserve-3d;
}
A lista está dentro do header e não contem esse código que você postou. Contudo, mesmo que eu acrescente ele continua com o mesmo problema...
Segue as paginas index.css e index.html para analise, caso seja preciso.