css设计立方体旋转效果遇到的问题及理解解决方法

        今日在学习立方体旋转效果这里的时候，了解了老师的思路后自己先尝试做了一个，最终旋转使旋转了，但看起来总感觉怪怪的，旋转轴跟想要的效果不一样        

        .one li a:first-child{
            background-color: skyblue;
        }
        .one li a:last-child{
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px) translateY(-20px);
        }

最初只是移动了立方体顶部的盒子来造出立方体，后来查资料才知道立方体的空间坐标系原点一直是不变的，这样我的立方体正面一直在面xoy上，所以如果想实现一个立方体原地旋转的效果，每个面都需要移动