图片旋转

做项目时有一个需求是一个指针在一段时间内旋转一定角度指向某个头像:

$('#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)设置初始旋转角度

猜你喜欢

转载自blog.csdn.net/weixin_43170484/article/details/82754594