transform 属性先后顺序 记录bug

        main {
                transform-style: preserve-3d;
                transform-origin: center center -300px;
                transform: perspective(900px);
                transition: 2s;
            }

        article:hover main {
                transform: perspective(900px) rotateY(90deg);
            }

初始效果：

目标：四张照片 hover的时候绕中间转90°

目标效果：

hover中的错误写法

        article:hover main {
                transform: rotateY(90deg) perspective(900px);//注意先后顺序！
            }

这种写法鼠标悬浮后效果

原因

transform先后属性不叠加，后者先转90°再进行透视 ，90°后已经看不见照片了 ，透视后也看不见