旋转在css3中不起作用

Question

我尝试将+图标rotate(0deg)旋转到rotate(48deg)，但我不想旋转背景。

按钮动作幻灯片动画。请建议我如何在CSS或javascript中解决此问题。

HTML

<button class="test_rotate"></button>

CSS：

.test_rotate:hover::after, .test_rotate:active::after {
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.test_rotate::after {
    content: attr(data-content);
    position: absolute;
    width: 40px;
    top: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    background-color: #239a98;
    border: solid 8px transparent;
    transition: transform .25s ease,background-color .25s ease;
    -ms-transform: translate(40px, 0);
    -webkit-transform: translate(40px, 0);
    transform: translate(40px, 0);
    border-top-left-radius: 54px;
    border-bottom-left-radius: 54px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-bottom: -4px;
    margin-top: -4px;
    padding-top: 4px;
    font-size: larger;
}

演示：https://codepen.io/burner/pen/MEqpWB