não consegui fazer o cubo do exercicio do cp 4,
Solucionado
não consegui fazer o cubo do exercicio do cp 4,
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!
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); }
´´´
<!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); }
´´´
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);
}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