Trying to move an image via transform: translateZ() - html

Question

I'm trying to move an img in a 3d space by using transform: translateZ().
here is a picture of what i have currently.
im trying to move the img icons around the box.
Here is what ive tried:
Using transform: translateZ(100px) in the id selectors for each img.
Using .box img:nthchild(7) {translateZ(100px)}.
Tried adding perspective to the .box class.
#animated-box {
position: absolute;
left: 67%;
top: 35%;
height: 300px;
width: 300px;
perspective: 1000px;
perspective-origin: 50% 50%;
cursor: pointer;
}
.box {
transform-style: preserve-3d;
width: 250px;
height: 250px;
position: relative;
animation: rotate 60s infinite;
z-index: 100;
}
.box div {
position: absolute;
width: 250px;
height: 250px;
opacity: 1;
background-color: #272727b2;
border: 1px solid #55FFEB;
box-shadow: inset 0 0 20px 5px rgb(85, 255, 235);
transition: all 1s ease;
z-index: 99;
}
#html-png {
top: 40%;
left: 60%;
height: 80px;
width: auto;
animation: crazy 45s infinite;
transform: translateY(1000px);
}
#js-png {
position: absolute;
top: 55%;
left: 35%;
height: 70px;
width: auto;
animation: crazy 45s infinite;
}
#css-png {
left: 10%;
top: 15%;
position: absolute;
height: 80px;
width: auto;
animation: crazy 45s infinite;
}
#boot-png {
left: 10%;
top: -17%;
position: absolute;
height: 80px;
width: auto;
animation: crazy 45s infinite;
}
#git-png {
left: 10%;
top: -17%;
position: absolute;
height: 80px;
width: auto;
animation: crazy 45s infinite;
}
#box-text {
position: relative;
top: 25%;
left: -20%;
width: 500px;
background-color: none;
color: white;
font-size: 20px;
opacity: 0;
transition: all 1s ease;
letter-spacing: .5px;
}
<!-- animated floating box -->
<section id="animated-box">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<img id="html-png" src="imgs/html5.png" alt="">
<img id="css-png" src="imgs/css.png" alt="">
<img id="js-png" src="imgs/javascript.png" alt="">
<img id="boot-png" src="imgs/boot.png" alt="">
<img id="git-png" src="imgs/git.png" alt="">
</div>
<div id="box-text">Click cube to see the code running this page</div>
</section>
[![enter image description here][1]][1]
any advice would be welcome, thanks in advance.