Javascript JS-在对象中为每个Dom元素分配一个值

我试图将一些CSS transfrom属性分配给通过QuerySelectorAll选择的Dom元素

需要指定的每个变换属性都存储在一个对象中，并且该属性的键与独特的CSS选择器匹配

---

为了帮助理解，这是我想要实现的is的冗余版本：

  var   front = document.querySelector('.front'),
    back = document.querySelector('.back'),
    right = document.querySelector('.right'),
    left = document.querySelector('.left'),
    top = document.querySelector('.top'),
    bottom = document.querySelector('.bottom');
    // common parent class is
    boxFigure = document.querySelectorAll('.cube figure')

    front.style.transform= "rotateY(0deg) translateZ("+trans+"px)" ;
    back.style.transform= "rotateY(180deg) translateZ("+trans+"px)" ;
    left.style.transform= "rotateY(90deg) translateZ("+trans+"px)" ;
    right.style.transform= "rotateY(-90deg) translateZ("+trans+"px)" ;
    top.style.transform= "rotateX(90deg) translateZ("+trans+"px)" ;
    bottom.style.transform= "rotateX(-90deg) translateZ("+trans+"px)" ;

---

这就是我迄今为止所尝试的：

var faces = {
front:"rotateY(0deg) translateZ("+trans+"px)",
back:"rotateY(180deg) translateZ("+trans+"px)" ,
left:"rotateY(90deg) translateZ("+trans+"px)" ,
right:"rotateY(-90deg) translateZ("+trans+"px)",
top:"rotateX(90deg) translateZ("+trans+"px)" ,
bottom:"rotateX(-90deg) translateZ("+trans+"px)"
};
 for (var i = 0; i < boxFigure.length; ++i){
     var side = this.className;    
    //I believe this to be wrong - elements are named like-> figure.front
     boxFigure[i].style.transform = faces[side]
};

由于我对这门学科还不熟悉，我可能会错过一些明显的东西。。。 欢迎提出任何建议

---

HTML是

 <div class="cube">
            <figure class="front"> 1</figure>
            <figure class="back"> 3</figure>
            <figure class="left">2 </figure>
            <figure class="right">4 </figure>
            <figure class="top">5 </figure>
            <figure class="bottom">6 </figure>
    </div>

1.
3.
2.
4.
5.
6.

用于（变量i=0；ifigure.front
boxFigure[i].style.transform=faces[side]；
};

---

应该这样做。

什么是

boxFigure

？什么是基本标记？它是包含figure.faces的父div，我正在更新htmlI。我在完全理解代码的概念时遇到了问题。我知道你想做什么，但不清楚。你有各种各样的元素。前面、后面等，。你也有方块图。你想将正面、背面等变换样式添加到长方体模型中吗？基本上我正在构建一个长方体模型，但它可能会让你发疯。盲目地盯着它看了好几个小时。

 <div class="cube">
            <figure class="front"> 1</figure>
            <figure class="back"> 3</figure>
            <figure class="left">2 </figure>
            <figure class="right">4 </figure>
            <figure class="top">5 </figure>
            <figure class="bottom">6 </figure>
    </div>

 for (var i = 0; i < boxFigure.length; ++i){
     var side = boxFigure[i].className;    
    //I believe this to be wrong - elements are named like-> figure.front
     boxFigure[i].style.transform = faces[side];
};