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

Implementação do Cubo 3d do exercício 4

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas

por Rogério de Sousa Andrade
| 539.9k xp | 65 posts
Assistente de Serviços de T.I

Novamente estou aqui porque não conseguir implementar o cubo 3d com base na explicação do exercício 4 ou a resposta esta errado ou fugiu algum detalhe no meu código a qual não consigo resolver, quero aprender fazer de uma vez por todo esse cubo e entender o uso do transform: eu conseguir fazer o SECTION das bolinhas e Agora Quero o do Cubo tudo na mesma página html

Aqui o HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Transform</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="transform.css" >
  </head>

  <body>
    <main>

    <section class="bolaAnimada">
      <div class="bolas">
        <div class="quadrado bola1"></div>
        <div class="quadrado bola2"></div>
        <div class="quadrado bola3"></div>
      </div>
    </section> 

    <section class="cuboAnimado">
      <div class="cubo">
        <div class="lado face1"></div>
        <div class="lado face2"></div>
        <div class="lado face3"></div>
        <div class="lado face4"></div>
        <div class="lado face5"></div>
        <div class="lado face6"></div>
      </div>
       </section>

    </main>
  </body>

</html>

Aqui o CSS


body{
   background-color:blue;
}
main{
  width:960px;
  margin-left:auto;
  margin-right:auto;
}
.bolaAnimada{

  -webkit-perspective:  8px;
  -webkit-perspective-origin:-50% 200px;
}
.bolas{
  width:600px;
  height:200px;
  background-color:#8080FF;
  padding:30px;
  overflow:scroll;
  overflow-x: hidden;
  -webkit-box-shadow:3px 3px black;
 }
.quadrado{
  width: 100px;
  height:100px;
  background-color:#fff;
  box-shadow:0 0 4px rgba( 0,0,0, .9);
  -webkit-transform:scale(1.2);
  -webkit-border-radius:50%;
}
.bola1 {
   transform: translateZ(2px);
}
.bola2 {
   transform: translateZ(-1px);
 }


.cuboAnimado{
  background:#4B0019;

}
.cubo{
   position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.lado{
  width:200px;
  height:200px;
  border:3px solid yellow;
  box-sizing:border-box;
  background:#fff;
  position:absolute;
}
.face1{
 -wekkit-transform:translateZ(100px);
 -moz-transform:translateZ(100px);
 transform:translateZ(100px);
}
.face2{
  -webkit-transform:rotateY(90deg) translateX(100px);
  -moz-transform:rotateY(90deg) translateX(100px);
  transform:rotateY(90deg) translateX(100px);
}
.face3{
  -webkit-transform:rotateY(-90deg) translateX(100px);
  -moz-transform:rotateY(-90deg) translateX(100px);
  transform:rotateY(-90deg) translateX(100px);
}
.face4{
  -webkit-transform:rotateX(90deg) translateY(100px);
  -moz-transform:rotateX(90deg) translateY(100px);
  transform:rotateX(90deg) translateY(100px);
}
.face5{
  -webkit-transform:rotateX(90deg) translateY(100px);
  -moz-transform:rotateX(90deg) translateY(100px);
  transform:rotateX(90deg) translateY(100px);
}
.face6{
  -webkit-transform:rotateY(180deg) translateZ(-100px);
  -moz-transform:rotateY(180) translateZ(-100px);
  transform:rotateY(180) translateZ(-100px);
}
9 respostas
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Olá Rogério! Segue abaixo um link com o cubo feito para você poder comparar com seu código:

Cubo

por Rogério de Sousa Andrade
| 539.9k xp | 65 posts
Assistente de Serviços de T.I

Conseguir agora eu quero aplicar uma cor de fundo da section cuboAnimado, assim como eu fiz na section bolaAnimada, e não estou conseguindo queria saber o porque não esta sendo aplicada a cor e também color um overflow nesse elemente

segue o código HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Transform</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="transform.css" >
  </head>

  <body>
    <main>

    <section class="bolaAnimada">
      <div class="bolas">
        <div class="quadrado bola1"></div>
        <div class="quadrado bola2"></div>
        <div class="quadrado bola3"></div>
      </div>
    </section> 

    <section class="cuboAnimado">
      <div class="cubo">
        <div class="lado face1"></div>
        <div class="lado face2"></div>
        <div class="lado face3"></div>
        <div class="lado face4"></div>
        <div class="lado face5"></div>
        <div class="lado face6"></div>
      </div>
       </section>

    </main>
  </body>

</html>

e CSS

body{
   background-color:blue;
}
main{
  width:960px;
  margin-left:auto;
  margin-right:auto;
}
.bolaAnimada{

  -webkit-perspective:  8px;
  -webkit-perspective-origin:-50% 200px;
}
.bolas{
  width:600px;
  height:200px;
  background-color:#8080FF;
  padding:30px;
  overflow:scroll;
  overflow-x: hidden;
  -webkit-box-shadow:3px 3px black;
 }
.quadrado{
  width: 100px;
  height:100px;
  background-color:#fff;
  box-shadow:0 0 4px rgba( 0,0,0, .9);
  -webkit-transform:scale(1.2);
  -webkit-border-radius:50%;
}
.bola1 {
   transform: translateZ(2px);
}
.bola2 {
   transform: translateZ(-1px);
 }

/*DESENVOLVIMENTO CUBO 3D*/

.cuboAnimado{
  border:3px solid green;
  background-color:#4B0019;
  transform:scale(1.2);
}
.cubo{
   position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  transform-style:preserve-3d;

  -webkit-transform:rotateX(20deg) rotateY(20deg);
  -moz-transform:rotateX(20deg) rotateY(20deg);
  transform:rotateX(20deg) rotateY(20deg);
  top:100px;
  left:200px;
}
.lado{
  width:200px;
  height:200px;
  border:5px solid yellow;
  box-sizing:border-box;
  background:#fff;

  position:absolute;
  top:0;
  left:0;
}
.face1{
 -wekkit-transform:translateZ(100px);
 -moz-transform:translateZ(100px);
 transform:translateZ(100px);
}
.face2{
  -webkit-transform:translateX(100px)rotateY(90deg);
  -moz-transform:translateX(100px)rotateY(90deg);
  transform: translateX(100px)rotateY(90deg);
}
.face3{
  -webkit-transform:translateX(-100px)rotateY(-90deg);
  -moz-transform:translateX(-100px)rotateY(-90deg);
  transform:translateX(-100px)rotateY(-90deg) ;
}
.face4{
  -webkit-transform:translateY(100px)rotateX(90deg);
  -moz-transform:translateY(100px)rotateX(90deg);
  transform: translateY(100px)rotateX(90deg);
}
.face5{
  -webkit-transform:translateY(100px)rotateX(90deg);
  -moz-transform:translateY(100px)rotateX(90deg);
  transform: translateY(100px)rotateX(90deg);
}
.face6{
  -webkit-transform:translateZ(-100px)rotateY(-180deg);
  -moz-transform:translateZ(-100px)rotateY(-180);
  transform:translateZ(-100px)rotateY(-180) ;
}
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Rogério, para a cor do background funcionar basta você adicionar um width e um height.

por Rogério de Sousa Andrade
| 539.9k xp | 65 posts
Assistente de Serviços de T.I

eu fiz isso na classe cuboAnimado e não funcionou

por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Rogério segue imagem anexo com alteração feita, penas adicioneis o width e o height a classe .cuboAnimado e funcionou.

Imagem

por Rogério de Sousa Andrade
| 539.9k xp | 65 posts
Assistente de Serviços de T.I

ok, deu certo para finalizar esse projeto gostaria de mudar os lados do cubo ao contrario da forma que ele foi feito e mostrado a parte de baixo e lado esquerdo tridimensionalmente quero deixar o lado direito e parte de cima tentei mudar mais não consegui

meu código até agora

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Transform</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="transform.css" >
  </head>

  <body>
    <main>

    <section class="bolaAnimada">
      <div class="bolas">
        <div class="quadrado bola1"></div>
        <div class="quadrado bola2"></div>
        <div class="quadrado bola3"></div>
      </div>
    </section> 

    <section class="cuboAnimado">
      <div class="cubo">
        <div class="lado face1"></div>
        <div class="lado face2"></div>
        <div class="lado face3"></div>
        <div class="lado face4"></div>
        <div class="lado face5"></div>
        <div class="lado face6"></div>
      </div>
       </section>

    </main>
  </body>

</html>

CSS

body{
   background-color:blue;
}
main{
  width:960px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}
.bolaAnimada{
  background:#FF9999;
  width: 70%;
  height:200px;
  margin-right: auto;
  margin-left: auto;
  border:3px solid green;
  box-sizing:border-box;
  overflow:scroll;
  overflow-x: hidden;
  -webkit-perspective:  8px;
  -webkit-perspective-origin:-50% 200px;
  position:absolute;
  top:50px;
}
.bolas{
  -webkit-transform-style:preserve-3d;
}
.quadrado{
  width: 100px;
  height:100px;
  background-color:#fff;
  box-shadow:0 0 4px rgba( 0,0,0, .9);
  -webkit-transform:scale(1.2);
  -webkit-border-radius:50%;
}
.bola1 {
   transform: translateZ(2px);
}
.bola2 {
   transform: translateZ(-1px);
 }

/*DESENVOLVIMENTO CUBO 3D*/

.cuboAnimado{
  -webkit-perspective:1000px;
  perspective-origin: 50% 200px;
  border:3px solid green;
  background-color:#4B0019;
  width: 70%;
  margin-right: auto;
  margin-left: auto;
  height:200px;
  box-sizing:border-box;
  position:absolute;
  top:300px;

  overflow:scroll;
  overflow-x: hidden;
}
.cubo{
   position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  transform-style:preserve-3d;

  -webkit-transform:rotateX(20deg) rotateY(20deg);
  -moz-transform:rotateX(20deg) rotateY(20deg);
  transform:rotateX(20deg) rotateY(20deg);
  top:100px;
  left:200px;
}
.lado{
  width:200px;
  height:200px;
  border:7px solid yellow;
  box-sizing:border-box;
  background:#fff;

  position:absolute;
  top:0;
  left:0;
}
.face1{
 -wekkit-transform:translateZ(100px);
 -moz-transform:translateZ(100px);
 transform:translateZ(100px);
}
.face2{
  -webkit-transform:translateX(100px)rotateY(90deg);
  -moz-transform:translateX(100px)rotateY(90deg);
  transform: translateX(100px)rotateY(90deg);
}
.face3{
  -webkit-transform:translateX(-100px)rotateY(-90deg);
  -moz-transform:translateX(-100px)rotateY(-90deg);
  transform:translateX(-100px)rotateY(-90deg) ;
}
.face4{
  -webkit-transform:translateY(100px)rotateX(90deg);
  -moz-transform:translateY(100px)rotateX(90deg);
  transform: translateY(100px)rotateX(90deg);
}
.face5{
  -webkit-transform:translateY(100px)rotateX(90deg);
  -moz-transform:translateY(100px)rotateX(90deg);
  transform: translateY(100px)rotateX(90deg);
}
.face6{
  -webkit-transform:translateZ(-100px)rotateY(180deg);
  -moz-transform:translateZ(-100px)rotateY(180deg);
  transform:translateZ(-100px)rotateY(180deg);
}
solução!
por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Rogério, não sei se entendi bem o que você deseja, mas eu refiz o cubo colocando ele de outra forma. Segue o link abaixo:

Cubo 2

por Rogério de Sousa Andrade
| 539.9k xp | 65 posts
Assistente de Serviços de T.I

ok e isso mesmo obrigado!

por Romário Torres Alcântara
| 279.3k xp | 488 posts
Moderador

Por nada Rogério! Estamos aqui para ajudar. Bons Estudos!