css给元素设置transform: rotateY(-180deg)怎样让他结束时还在原来的位置？

Question

        .cbp-item{
            display: inline-block;
            // width: 0;
            // height: 0;
            // overflow: hidden;
            visibility: hidden;
            opacity: 0;
            position: relative;
            transition: .6s;
            transform: rotateY(0deg);
            &.show{
              width: 25%;
              height: auto;
              visibility: visible;
              opacity: 1;
              transform: rotateY(-180deg);
            }

给元素设置transform: rotateY(-180deg);后位置反了，设置-360deg动画幅度又太大了，怎样让他-180deg结束时还在原来的位置?

Answer 1

结束时移除class .show会自动回到原位置，如果不能去除类名show，那需要通过css动画实现

Answer 2

设置transform：rotateY(-180dge) scaleX(-1)