前端实现图片绕指定圆心转动,且图片自身不转动的功能、
div>img
div:
利用css的animation 去做循环
用transform: rotate 去做旋转
然后利用transform-origin: bottom left;指定旋转圆心位置
img 在div旋转的同时 做反向旋转
<template>
<div class="home">
<div class="box">
<img src="/static/img/magnifier.png" alt="" />
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
}
},
}
</script>
<style scoped>
.home {
width: 100%;
height: 100%;
}
.box {
width: 300px;
height: 300px;
margin: 0 auto;
animation: circle 5s linear infinite;
transform-origin: bottom left;
}
@keyframes circle {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.box>img {
width: 50px;
height: 50px;
animation: circle 5s linear infinite;
animation-direction: reverse;
transform-origin: center center;
}
</style>
逆时针旋转 animation 选择反向运行的
<template>
<div class="home">
<div class="box">
<img src="/static/img/magnifier.png" alt="" />
</div>
</div>
</template>
<script>
export default {
name: 'HomeView',
data() {
return {
}
},
}
</script>
<style scoped>
.home {
width: 100%;
height: 100%;
}
.box {
width: 300px;
height: 300px;
margin: 0 auto;
animation: circle 5s linear infinite;
transform-origin: bottom left;
animation-direction: reverse;
}
@keyframes circle {
0% {
-webkit-transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.box>img {
width: 50px;
height: 50px;
animation: circle 5s linear infinite;
/* animation-direction: reverse; */
transform-origin: center center;
}
</style>