1. 程式人生 > >圖片旋轉

圖片旋轉

做專案時有一個需求是一個指標在一段時間內旋轉一定角度指向某個頭像:

$('#cssTest').css('transition-duration', '1s').css('transform', 'rotate(0deg)')

transition-duration設定過渡效果持續時間
transform: rotate(10deg)設定以10deg旋轉
在要旋轉的圖片上新增如下css:

.PointerIcon{
	-webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -ms-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

transform-origin設定以某個點為圓心旋轉,例如上?中的right top右上角為圓心旋轉
transform: rotate(-45deg)設定初始旋轉角度