Dúvida no Ex. 5 da Aula 4 - Transformações | HTML5 e CSS3 II: Turbinando as suas páginas

Solucionado (ver solução)

Solucionado
(ver solução)

7
respostas

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Transformações e atividade Palavras em 3D

por Werner Hadas Stumpf

| 56.9k xp | 23 posts

Estou com um problema pois as minhas palavras somem da tela...

 <ul class="palavras-cabecalho">
            <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>

e no css fiz exatamente como na resposta do exercício...

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

.eficiencia {
  top: 50%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}
.boas-praticas {
  top: 70%;
  left: 20%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(1px);
}
.codigo-limpo {
  top: 45%;
  left: 25%;
  transform: translate(-50%, -50%) rotate(-10deg) translateZ(2px);
}
.css3 {
  top: 55%;
  left: 35%;
  transform: translate(-50%, -50%) rotate(5deg) translateZ(2px);
}
.html5 {
  top: 30%;
  left: 65%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}
.javascript {
  top: 15%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(1px);
}
.acessibilidade {
  top: 30%;
  left: 35%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(3px);
}
.responsivo {
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(3px);
}
.otimizacoes {
  top: 70%;
  left: 65%;
  transform: translate(-50%, -50%) rotate(-5deg) translateZ(2px);
}
.agilidade {
  top: 75%;
  left: 35%;
  transform: translate(-50%, -50%) rotate(5deg) translateZ(1px);
}
.design {
  top: 40%;
  left: 60%;
  transform: translate(-50%, -50%) rotate(10deg) translateZ(2px);
}

7 respostas

por Ramon Pacheco

| 487.6k xp | 249 posts

Moderador Web Developer Jr.

30/05/2016

Olá Werner,

qual a versão do navegador que você está usando ?

E qual é ele?

Att,

por Werner Hadas Stumpf

| 56.9k xp | 23 posts

31/05/2016

É o chrome última versão ...

por Ramon Pacheco

| 487.6k xp | 249 posts

Moderador Web Developer Jr.

01/06/2016

Entedi,

Faz um teste com esse código:

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

.eficiencia {
    top: 50%;
    left: 60%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(4px) rotate(-5deg);
}
.boas-praticas {
    top: 70%;
    left: 20%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%) translateZ(1px) rotate(10deg);
}
.codigo-limpo {
    top: 45%;
    left: 25%;
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-10deg);
}
.css3 {
    top: 55%;
    left: 35%;
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(5deg);
}
.html5 {
    top: 30%;
    left: 65%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%)  translateZ(2px) rotate(10deg);
}
.javascript {
    top: 15%;
    left: 60%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(1px) rotate(-5deg);
}
.acessibilidade {
    top: 30%;
    left: 35%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(3px) rotate(-5deg);
}
.responsivo {
    top: 40%;
    left: 40%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%) translateZ(3px) rotate(10deg);
}
.otimizacoes {
    top: 70%;
    left: 65%;
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(-5deg);
}
.agilidade {
    top: 75%;
    left: 35%;
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
    transform: translate(-50%, -50%) translateZ(1px) rotate(5deg);
}
.design {
    top: 40%;
    left: 60%;
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    transform: translate(-50%, -50%) translateZ(2px) rotate(10deg);
}

solução!

por Nauro Pereira Moraes

| 61.6k xp | 5 posts

22/06/2016

Também não consegui fazer o efeito 3D no meu exercício. Estou utulizando o Chrome Version 51.0.2704.103 m

Utilizando os valores como base ainda trocam o posicionamento do meus textos.

Resumindo, ficou uma zona.... :)

por Thiago Martins Amorim de Andrade

| 77.3k xp | 4 posts

02/08/2016

Estou com o mesmo problema.

por Talita Azevedo

| 218.4k xp | 182 posts

Moderador

09/10/2016

Também estou com este problema as palavras somem da tela. :(

por ricardo martins da costa lino

| 263.5k xp | 60 posts

Investidor

11/10/2016

O posicionamento parece que mudou na resposta do que estava anteriormente. E somando com o translate posicio as palavras fora da tela mesmo (top 45 e translate -50 no .boas-praticas por exemplo depois tem casos piores como html5 e javascript)).