欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片旋转

程序员文章站 2022-05-03 08:18:29
...

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

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

相关标签: CSS 动画