Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida no Ex. 5 da Aula 4 - Transformações

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

por Guilherme Schrier de Resende
| 57.4k xp | 5 posts

Não estou conseguindo fazer as palavras entrarem em perspectiva. No ATOM a sintaxe "perspective" aparece em um tom mais escuro do que as outras sintaxes, o que me da entender que tem algo errado.

Vou deixar o codigo abaixo:

CSS:

.palavra-home{
    font-family: "Shadows Into Light", sans-serif;
    color: #D16691;
    font-size: 1.5rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    perspective: 6px;
    -webkit-perspective: 6px;
    -moz-perspective: 6px;
}
.eficiencia {
    top: 43%;
    left: 10%;
    -webkit-transform: translate(-50%, -50%) rotate(-30deg) translateZ(2em);
    transform: translate(-50%, -50%) rotate(-30deg) translateZ(2em);
}
.boas-praticas {
    top: 23%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%) rotate(25deg)  translateZ(1px);
    transform: translate(-50%, -50%) rotate(25deg) translateZ(1px);
}
.codigo-limpo {
    top: 34%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) rotate(-10deg) translateZ(5px);
    transform: translate(-50%, -50%) rotate(-10deg) translateZ(5px);
}
.css3 {
    top: 67%;
    left: 47%;
    -webkit-transform: translate(-50%, -50%) rotate(15deg) translateZ(-5px);
    transform: translate(-50%, -50%) rotate(15deg) translateZ(-5px);
}
.html5 {
    top: 40%;
    left: 62%;
    -webkit-transform: translate(-50%, -50%) rotate(-13deg) translateZ(7px);
    transform: translate(-50%, -50%) rotate(-13deg) translateZ(7px);
}
.javascript {
    top: 86%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%) rotate(-15deg) translateZ(-2px);
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(-2px);
}
.acessibilidade {
    top: 9%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%) rotate(-18deg) translateZ(6px);
    transform: translate(-50%, -50%) rotate(-18deg) translateZ(6px);
}
.responsivo {
    top: 52%;
    left: 73%;
    -webkit-transform: translate(-50%, -50%) rotate(18deg) translateZ(-5px);
    transform: translate(-50%, -50%) rotate(18deg) translateZ(-5px);
}
.otimizacoes {
    top: 72%;
    left: 82%;
    -webkit-transform: translate(-50%, -50%) rotate(5deg) translateZ(10px);
    transform: translate(-50%, -50%) rotate(5deg) translateZ(10px);
}
.agilidade {
    top: 85%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%) rotate(5deg) translateZ(4px);
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(4px);
}
.design {
    top: 66%;
    left: 26%;
    -webkit-transform: translate(-50%, -50%) rotate(14deg) translateZ(-3px);
    transform: translate(-50%, -50%) rotate(14deg) translateZ(-3px);
}

HTML:

        <ul class="PalavrasCab">
          <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>
2 respostas
por Guilherme Schrier de Resende
| 57.4k xp | 5 posts

Bem, consegui resolver o problema do parametro persperctive, porem o codigo ficou confuso e não estou conseguindo uma maneira de melhora-lo. Alguma dica?

CSS:

.PalavrasCab{
    perspective: 6px;
    -webkit-perspective: 6px;
    -moz-perspective: 6px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.palavra-home{
    font-family: "Shadows Into Light", sans-serif;
    color: #D16691;
    font-size: 300%;
    font-weight: bold;
    position: absolute;
}
.eficiencia {
    top: 43%;
    left: -15%;
    -webkit-transform: translate(-50%, -50%) rotate(-30deg) translateZ(-4px);
    transform: translate(-50%, -50%) rotate(-30deg) translateZ(-4px);
}
.boas-praticas {
    top: 23%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%) rotate(25deg)  translateZ(-1px);
    transform: translate(-50%, -50%) rotate(25deg) translateZ(-1px);
}
.codigo-limpo {
    top: 34%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%) rotate(-10deg) translateZ(-5px);
    transform: translate(-50%, -50%) rotate(-10deg) translateZ(-5px);
}
.css3 {
    top: 78%;
    left: 47%;
    -webkit-transform: translate(-50%, -50%) rotate(15deg) translateZ(-5px);
    transform: translate(-50%, -50%) rotate(15deg) translateZ(-5px);
}
.html5 {
    top: 40%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%) rotate(-13deg) translateZ(1px);
    transform: translate(-50%, -50%) rotate(-13deg) translateZ(1px);
}
.javascript {
    top: 86%;
    left: 90%;
    -webkit-transform: translate(-50%, -50%) rotate(-15deg) translateZ(-2px);
    transform: translate(-50%, -50%) rotate(-15deg) translateZ(-2px);
}
.acessibilidade {
    top: 2%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%) rotate(-18deg) translateZ(-6px);
    transform: translate(-50%, -50%) rotate(-18deg) translateZ(-6px);
}
.responsivo {
    top: 67%;
    left: 73%;
    -webkit-transform: translate(-50%, -50%) rotate(18deg) translateZ(-5px);
    transform: translate(-50%, -50%) rotate(18deg) translateZ(-5px);
}
.otimizacoes {
    top: 72%;
    left: 110%;
    -webkit-transform: translate(-50%, -50%) rotate(5deg) translateZ(-10px);
    transform: translate(-50%, -50%) rotate(5deg) translateZ(-10px);
}
.agilidade {
    top: 95%;
    left: 5%;
    -webkit-transform: translate(-50%, -50%) rotate(5deg) translateZ(-4px);
    transform: translate(-50%, -50%) rotate(-5deg) translateZ(-4px);
}
.design {
    top: 66%;
    left: 26%;
    -webkit-transform: translate(-50%, -50%) rotate(14deg) translateZ(-3px);
    transform: translate(-50%, -50%) rotate(14deg) translateZ(-3px);
}

Tentei fazer da forma que aparecia na resolução, mas não funcionou.

solução!
por Guilherme Schrier de Resende
| 57.4k xp | 5 posts

Depois de mto tentar finalmente consegui.

CSS:

html, body{
    overflow-x: hidden;
    height: 100%;
}
body{
       -moz-perspective: 6px;
    -webkit-perspective: 6px;
            perspective: 6px;
       -moz-perspective-origin: 50% 160px;
    -webkit-perspective-origin: 50% 160px;
            perspective-origin: 50% 160px;
}
.palavras-home{
       -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.palavra-home{
    font-family: "Shadows Into Light", sans-serif;
    color: #D16691;
    font-size: 400%;
    font-weight: bold;
    position: absolute;
}
.eficiencia {
    top: 45%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(-10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(3px) rotate(-10deg) scale(.25);
}
.boas-praticas {
    top: 20%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(8deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(8deg) scale(.25);
}
.codigo-limpo {
    top: 75%;
    left: 30%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-15deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(-15deg) scale(.25);
}
.css3 {
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(-10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(-10deg) scale(.25);
}
.html5 {
    top: 40%;
    left: 60%;
    -webkit-transform: translate(-50%, -50%) translateZ(4px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(4px) rotate(10deg) scale(.25);
}
.javascript {
    top: 66%;
    left: 80%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(20deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(20deg) scale(.25);
}
.acessibilidade {
    top: 50%;
    left: 61%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(5deg) scale(.25);
}
.responsivo {
    top: 63%;
    left: 63%;
    -webkit-transform: translate(-50%, -50%) translateZ(3px) rotate(12deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(3px) rotate(12deg) scale(.25);
}
.otimizacoes {
    top: 32%;
    left: 58%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
}
.agilidade {
    top: 40%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(1px) rotate(10deg) scale(.25);
}
.design {
    top: 66%;
    left: 26%;
    -webkit-transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
            transform: translate(-50%, -50%) translateZ(2px) rotate(10deg) scale(.25);
}
.btwitter{
    width: 14.5em;
    line-height: 1;
    padding: .7em .3em;
    box-sizing: border-box;
    text-align: center;
    text-decoration: overline underline;
    text-transform: uppercase;
    background-color: #3C1D3D;
    color: #CCDDDD;
    border: .15em solid black;
    font-size: 1.4em;
    font-family: "Shadows Into Light", sans-serif;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-trasnform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: translate(6.5765em, -2.4745em) rotate(45deg);
            transform: translate(6.5765em, -2.4745em) rotate(45deg);
}
.titulo-principal{
    text-align: center;
    background-color: #851944;
    padding: .3rem;
    border-bottom: .4rem solid #000000;
    margin: 0;
    font-family: "Open Sans Condensed", sans-serif;
    color: #FFFFFF;
    position: relative;
       -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.subtitulo-principal{
    text-align: center;
    margin: 0;
    padding-bottom: 1rem;
}
.cabecalho{
    border: 0;
}
.foto-home {
    height: 200px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.saudacao{
    text-align: center;
}
.saudacao p {
    color: #9999AA;
    line-height: 1;
    padding-top: 4em;
    padding-bottom: 4em;
}
.saudacao-inicio {
    color: #888899;
    font-size: 4rem;
    margin-bottom: 0;
}
.saudacao-ultima-linha {
    display: block;
    margin-left: 30ch;
}
.saudacao strong {
    color: #000000;
    font-size: 3.5rem;
    font-family: "Open Sans Condensed", sans-serif;
    margin-right: 15ch;
}
.saudacao em {
    color: #851950;
    font-size: 3.5rem;
    -webkit-transform: rotate(-5deg) skew(-15deg);
            transform: rotate(-5deg) skew(-15deg);
    display: inline-block;
}
.botao-index {
    background-color: #851944;
    color: #FFFFFF;
    border: .2em solid black;
    width: 400px;
    display: block;
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: .5em;
    -webkit-border-radius: 20% / 40%; //utilizar a / para separar os raios nos eixos X e Y
    -moz-border-radius: 20% 20% 20% 20%/ 40% 40% 40% 40%; //podem ser descritos os valores para cada angulo da caixa
    border-radius: 20% / 40%;
}
.secao-inicio h2 {
    text-transform: uppercase;
    margin: 1rem;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000000;
    border-bottom: .5em solid transparent;
}
.trabalhos h2 {
    color: #FFFFFF;
}
.trabalhos ul {
    overflow: hidden;
    border: .3em solid black;
    margin-left: 1em;
    margin-right: 1em;
}
.trabalhos li {
    float: left;
    width: 33.3%;
}
.trabalhos img {
    width: 100%;
    display: block;
}
.blog {
    background-color: #999999;
    color: #FFFFFF;
    border-top: .5em solid #000000;
    border-bottom: .5em solid #851944;
    position: relative;
}
small{
    margin-left: 1em;
}
.post1{
    color: #999999;
    top: 5.3em;
    left: 19em;
    position: absolute;
    font-size: .9em;
}
.post2{
    color: #999999;
    top: 7.75em;
    left: 19em;
    position: absolute;
    font-size: .9em;
}
.post3{
    color: #999999;
    top: 10.2em;
    left: 19em;
    position: absolute;
    font-size: .9em;
}
.blog li{
    padding-top: .6em;
    padding-bottom: .3em;
    width: 92%;
}
.mais-recente:hover{
    background-color: #FFFFFF;
    color: #000000;
    box-shadow: .2em .2em .4em black;
}
.art-anterior:hover{
    background-color: #CCCCCC;
    color: #FFFFFF;
    box-shadow: .2em .2em .4em #000000;
}
.blog li a{
    color: #FFCCFF;
    margin-left: 1em;
}
.blog li a:hover{
    color: #3C1D3D;
}
footer {
    background-color: #000000;
    color: #FFFFFF;
}
footer a {
    color: #FF9999;
}
footer p{
    font-size: .8rem;
}
main {
    width: 100%;
    padding-bottom: 0;
    float: none;
}