Hi.
I am trying to create a spinning globe - all I need to do is change the position of the image - but I cannot work out how to do it in WF.
All the examples I have found use “background-position”
@keyframes spin
0%
background-position-x: 0
100%
background-position-x: 380px
How would this be done in WF?
Ta
Pete
What exactly are you trying to achieve? Move the globe or move the inner image (map)?
Hi,
Are you trying to make the image slide horizontally (or something like that) or do you want the image to “spin” itself?
Thought I had explained it - the image moves itself - which is what the CSS keyframe animation shows
@keyframes spin
0%
background-position-x: 0
100%
background-position-x: 380px
I would like to try and recreate what is showing on the Codepen which is the image moving - although if there is another (easy) way to recreate the same effect then that would also be good.
This is just one example of the many CSS spinning globes but all seem to use the same process.
body
display: flex
align-items: center
justify-content: center
flex-direction: column
height: 100vh
.dunya
width: 150px
height: 150px
background: url(https://1.bp.blogspot.com/-UUXaK5GCj-k/UcsKJRMgkVI/AAAAAAAACfM/sePP_H08JTQ/s1600/1.jpg)
border-radius: 100%
background-size: 380px
animation: spin 3.5s infinite linear
@keyframes spin
0%
background-position-x: 0
100%
background-position-x: 380px
I can do most of the CSS (it’s not hard) in WF - what I cannot work out is how to do the keyframes animation.
Pete
