Dúvida no desenvolvimento do cubo | HTML5 e CSS3 II: Turbinando as suas páginas

por Natan Souza

| 2101.7k xp | 3699 posts

Instrutor Product Design Lead

17/09/2015

Oi Rogerio, tudo certo?

Aqui tem um cubo feito da forma que é mostrada no cap4: http://jsbin.com/mohudimano/edit?html,css,output

Se preferir, pode mandar seu código aqui para darmos uma olhada.

Espero ter ajudado,

Abcs!

por Rogério de Sousa Andrade

| 540.6k xp | 65 posts

Assistente de Serviços de T.I

20/09/2015

Ainda não conseguir fazer. Não sei o que esta pegando de errado no meu código eu fiz conforme o exercício e nada, segue abaixo o código meu

++++++++++++++HTML+++++++++++

<!DOCTYPE html>

++++++++++++++++ CSS+++++++++++

/.Cubo{ perpective:10px; }/

.cubo{ position:relative; transform-style: preserve-3d; width: 100px; height: 100px; margin: 100px 100px; -webkit-transform: rotateX(-10deg) rotateY(10deg); } .cubo-3d{ position:absolute; width:100px; height:100px; } .face1{ -webkit-transform: translateZ(50px); background-color:yellow; } .face2{ -webkit-transform:rotateY(90deg)translateX(50px); background-color:black; } .face3{ -webkit-transform:rotateY(-90deg)translateX(50px); background-color: #ffffff; rotateY: (-90deg) translateX: (50px); background-color;#fff;

} .face4{ rotateX: (90deg) translateY: (-50px) } .face4{ -webkit-transform:rotateY(90deg)translateY(-50px); background-color:green; } .face5{ -webkit-transform:rotateY(90deg)translateY(-50px); background-color: #ccc; } .face6{ -webkit-transform:rotateX(180deg)translateZ(-50px); }

por Rogério de Sousa Andrade

| 540.6k xp | 65 posts

Assistente de Serviços de T.I

20/09/2015

´´´

<!DOCTYPE html>

/.Cubo{ perpective:10px; }/

.cubo{ position:relative; transform-style: preserve-3d; width: 100px; height: 100px; margin: 100px 100px; -webkit-transform: rotateX(-10deg) rotateY(10deg); } .cubo-3d{ position:absolute; width:100px; height:100px; } .face1{ -webkit-transform: translateZ(50px); background-color:yellow; } .face2{ -webkit-transform:rotateY(90deg)translateX(50px); background-color:black; } .face3{ -webkit-transform:rotateY(-90deg)translateX(50px); background-color: #ffffff; rotateY: (-90deg) translateX: (50px); background-color;#fff;

} .face4{ rotateX: (90deg) translateY: (-50px) } .face4{ -webkit-transform:rotateY(90deg)translateY(-50px); background-color:green; } .face5{ -webkit-transform:rotateY(90deg)translateY(-50px); background-color: #ccc; } .face6{ -webkit-transform:rotateX(180deg)translateZ(-50px); }

´´´

por Rogério de Sousa Andrade

| 540.6k xp | 65 posts

Assistente de Serviços de T.I

20/09/2015

Ainda não conseguir fazer meu código e esse ai debaixo fiz conforme orientação do exercício cap4, o que esta errado nele ?


<html>
  <head>
    <title>Cubo3D</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="cubo3d.css" />
  </head>
  <body>
    <section class="Cubo">
      <div class="cubo">
    <div class="cubo-3d face1"></div>
    <div class="cubo-3d face2"></div>
    <div class="cubo-3d face3"></div>
    <div class="cubo-3d face4"></div>
    <div class="cubo-3d face5"></div>
    <div class="cubo-3d face6"></div>
      </div>
    </section>
  </body>
</html>



/*.Cubo{
  perpective:10px;
}*/

.cubo{
  position:relative;
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  margin: 100px 100px;
  -webkit-transform: rotateX(-10deg) rotateY(10deg);
}
.cubo-3d{
  position:absolute;
  width:100px;
  height:100px;
}
.face1{
  -webkit-transform: translateZ(50px);
  background-color:yellow;
}
.face2{
  -webkit-transform:rotateY(90deg)translateX(50px);
  background-color:black;
}
.face3{
  -webkit-transform:rotateY(-90deg)translateX(50px);
  background-color: #ffffff;
  rotateY: (-90deg)
  translateX: (50px);
  background-color;#fff;

}
.face4{
  rotateX: (90deg)
  translateY: (-50px)
}
.face4{
    -webkit-transform:rotateY(90deg)translateY(-50px);
  background-color:green;
}
.face5{
    -webkit-transform:rotateY(90deg)translateY(-50px);
  background-color: #ccc;
}
.face6{
  -webkit-transform:rotateX(180deg)translateZ(-50px);
}

solução!

por Natan Souza

| 2101.7k xp | 3699 posts

Instrutor Product Design Lead

21/09/2015

Oi Rogério, tudo bem?

Na explicação da aula, é mostrado que o rotate e o translate são alguns dos valores possíveis da propriedade transform. No seu código está como se elas fossem propriedades. A sintaxe correta seria algo como:

transform: rotateX (90deg) translateY(-50px)

Apenas ajustei isso, e seu código começou a funcionar, segue abaixo:

.face1{
  transform: translateZ(50px);
  background-color:yellow;
}
.face2{
  transform: translateX(50px) rotateY(90deg);
  background-color:black;
}
.face3{
  transform: translateX(-50px) rotateY(-90deg);
  background-color: #ffffff;
}
.face4{
  transform: translateY(50px) rotateX(90deg);
  background-color:green;
}

.face5{
  transform: translateY(-50px) rotateX(-90deg);
  background: purple;
}

.face6{
  transform: translateZ(-50px) rotateY(180deg);
  background: tomato;
}

Foi necessário colocar alguma cor de background para a face4 e face6 também para podermos visualizar o resultado.

Espero ter ajudado,

abcs

Mergulhe em programação