关于rotate和translate的执行顺序问题 (An issue with the execution order of rotate and translate.)

[xunshengxing]

我发现我改变元素的rotate和translate类的顺序，结果在浏览器中显示的效果总是先translate再rotate，除非我显示地写style

    <nav class="perspective-400 mx-auto my-[100px] w-[720px] h-[35px]">
        <a href="" class="w-[120px] h-[35px] block relative hover:rotate-x-[90deg] transition transform-style-3d duration-[3s] float-left mx-[10px]">
            <div class="absolute  bg-pink-500 w-full h-full top-0 left-0 z-[1] text-[#fff] text-[15px] text-center leading-[35px] backface-hidden translate-z-[17.5px]">pink老师</div>
            <div style="transform: rotateX(-90deg) translateY(17.5px);" class="absolute  bg-purple-500 w-full h-full  top-0 left-0 text-[#fff] text-[15px] text-center leading-[35px] backface-hidden ">黑马程序员</div>
        </a>
        <a href="" class="w-[120px] h-[35px] block relative hover:rotate-x-[90deg] transition transform-style-3d duration-[3s] float-left mx-[10px]">
            <div class="absolute  bg-pink-500 w-full h-full top-0 left-0 z-[1] text-[#fff] text-[15px] text-center leading-[35px] backface-hidden translate-z-[17.5px]">pink老师</div>
            <div class="absolute  bg-purple-500 w-full h-full rotate-x-[-90deg] translate-y-[17.5px]   top-0 left-0 text-[#fff] text-[15px] text-center leading-[35px] backface-hidden ">黑马程序员</div>
        </a>
        <a href="" class="w-[120px] h-[35px] block relative hover:rotate-x-[90deg] transition transform-style-3d duration-[3s] float-left mx-[10px]">
            <div class="absolute  bg-pink-500 w-full h-full top-0 left-0 z-[1] text-[#fff] text-[15px] text-center leading-[35px] backface-hidden translate-z-[17.5px]">pink老师</div>
            <div class="absolute  bg-purple-500 w-full h-full translate-y-[17.5px] rotate-x-[-90deg]  top-0 left-0 text-[#fff] text-[15px] text-center leading-[35px] backface-hidden ">黑马程序员</div>
        </a>
    </nav>

第一个是显式地写先translate再rotate,结果跟第二个展示的效果不一样，而第二个跟第三个调换translate和rotate顺序展示出来的效果却是一样的

[sambauers]

I found that when I change the order of the rotate and translate classes on an element, the effect displayed in the browser always shows translate first and then rotate, unless I explicitly write the style.

In the first example, I explicitly wrote translate first and then rotate, resulting in a different effect compared to the second example. However, the second and third examples, which switch the order of translate and rotate, display the same effect.

I suggest you nest components and apply single transformations to them to achieve your desired outcome if the default ordering isn't working. Also, you can always adjust your transforms - e.g. use translateX instead of translateY to account for the default ordering.