Posted at

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プロパティでアニメーションするときは起点を忘れずに書いたほうがよいですね。