+ 2
Can anyone help me with this code
A 3d skybox with html and css but the seems to be a problem which I can't seem to find I also need to attach the images of the six sides of the skybox which I will try to link down below https://code.sololearn.com/WI56R2LK4sJd/?ref=app
6 Answers
+ 5
<!DOCTYPE html>
<html>
<head>
<title>3D Box</title>
<style>
body {
background-color: black;
overflow: hidden;
}
.box {
width: 200px;
height: 200px;
margin: 200px auto;
background-color: black;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: black;
}
.front {
transform: translateZ(100px);
background-color: white;
}
.right {
transform: rotateY(90deg) translateZ(100px);
background-color: orange;
}
.back {
transform: rotateY(180deg) translateZ(10px);
background-color: brown;
}
.left {
transform: rotateY(-90deg) translateZ(100px);
background-color: grey;
}
.top {
transform: rotateX(90deg) translateZ(100px);
background-color: blue;
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="face front"></div>
<div class="face right"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
+ 2
Please do not put links in the tag section.
+ 2
anas alshammah tnx!😁
+ 1
anas alshammah but how do I station myself in the cube🤔
+ 1
you want put yourself in cube as image?
+ 1
anas alshammah yes I want to put myself (camera) in the cube
Often have questions like this?
Learn more efficiently, for free:
Hot today
Algorithms Python
0 Votes
It is lagging [Solved]
1 Votes
Safety deposit boxes
0 Votes
What is the purpose of <kbd>
1 Votes
How many datatype support by C?
0 Votes