transform: rotateZ(180deg);で左回転になってしまうところを右回転にしたい

概要

以下のコードでなぜか左回り..

index.html

<dl>
    <dt class="nanntoka_title">東北</dt>
    <dd>ほにゃらら</dd>
</dl>

style.css

.nanntoka_title{
    display: block;
    height: 54px;
    padding: 0 12px;
    line-height: 54px;
    color: #fff;
    background: #527eb4;
    position: relative;
    &:after{
        content: "";
        display: block;
        width: 14px;
        height: 8px;
        background: url($imgurl + "icon.svg") no-repeat center center / contain;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        transition: 0.5s;

    }
    &:hover:after{
        transform: rotateZ(180deg);
    }
}

説明

答えは簡単でした。

style.css

.nanntoka_title{
    display: block;
    height: 54px;
    padding: 0 12px;
    line-height: 54px;
    color: #fff;
    background: #527eb4;
    position: relative;
    &:after{
        content: "";
        display: block;
        width: 14px;
        height: 8px;
        background: url($imgurl + "icon.svg") no-repeat center center / contain;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        transform: rotateZ(0deg);
        transition: 0.5s;

    }
    &:hover:after{
        transform: rotateZ(180deg);
    }
}

transform: rotateZ(0deg);を足すだけ。

えっ

起点違かったの..?

あとがき

とどのつまり、どんなときでもtransitionプロパティでアニメーションするときは起点を忘れずに書いたほうがよいですね。