Question [Resolved]: How do I rotate the background image of a circle?
Link: https://codepen.io/Refath/pen/XaoMEj
Hi, I'm trying to rotate the background image of a circle element the opposite direction, but at the same magnitude of rotation, so that the background remains straight relative to the user.
I've tried to use css keyframes, but realized this would not be the best idea, and then tried to implement the solution given [here][1], also failing after some tweaks. Thanks; Any help is appreciated (I'm not an advanced web developer, so I don't have much experience with JS, etc.)
@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
background-image: url(http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg);
}
.circle,
.r1c,
.r2c,
.r3c,
.r4c {
border: white 2px solid;
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: 0.1s ease-in-out;
}
.circle {
background-image: url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
background-position: -9px -9px;
}
.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
width: 108px;
height: 108px;
border-radius: 108px;
transition: 0.3s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c {
position: relative;
overflow: hidden;
top: 200px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c {
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c {
left: 400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}
.r4c {
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l,
.r2l,
.r3l,
.r4l {
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l {
top: 200px;
}
.r2l {
top: -200px;
}
.r3l {
width: 90px;
height: 0px;
left: 200px;
}
.r4l {
width: 90px;
height: 0px;
left: -200px;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
animation: around 7.5s infinite ease;
}
@keyframes around {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
50% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
.hero {
color: white;
font-family: 'Quicksand', sans-serif;
}<center>
<h1 class="hero">Hi, User!</h1>
</center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">
<div class="circle">
</div>
<a href="https://www.google.com">
<div class="r1c">
</div>
</a>
<div class="r2c">
</div>
<div class="r3c">
</div>
<div class="r4c">
</div>
<div class="r1l">
</div>
<div class="r2l">
</div>
<div class="r3l">
</div>
<div class="r4l">
</div>
</div>Do you want something like this :
@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body{
background-color:black;
}
img{
position:relative;
width:100%;
height:100%;
animation: around 6.5s infinite ease;
animation-direction:reverse
}
.circle, .r1c, .r2c, .r3c, .r4c{
border: white 2px solid;
width: 90px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: -5px -5px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: 0.1s ease-in-out;
}
.circle{
background-image: url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
background-position: -9px -9px;
}
.r1c:hover, .r2c:hover, .r3c:hover, .r4c:hover{
width:108px;
height: 108px;
border-radius:108px;
transition: 0.3s ease-in;
background-size: 120px 120px;
background-position: -5.4px -5.4px;
}
.r1c{
position: relative;
overflow: hidden;
top: 310px;
background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c{
top: -400px;
background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c{
left: 400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}
.r4c{
right: 400px;
background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l, .r2l, .r3l, .r4l{
border: white 1px solid;
width: 0px;
height: 90px;
border-radius: 90px;
fill: lightred;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.r1l{
top: 200px;
}
.r2l{
top: -200px;
}
.r3l{
width: 90px;
height: 0px;
left: 200px;
}
.r4l{
width: 90px;
height: 0px;
left: -200px;
}
.parent {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
position:absolute;
animation: around 7.5s infinite ease;
}
@keyframes around{
0% {transform: rotate(0deg);}
25% {transform: rotate(90deg);}
25% {transform: rotate(90deg);}
50% {transform: rotate(180deg);}
50% {transform: rotate(180deg);}
75% {transform: rotate(270deg);}
75% {transform: rotate(270deg);}
100% {transform: rotate(360deg);}
}
.hero{
color:white;
font-family: 'Quicksand', sans-serif;
}<img src='http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg'/>
<center> <h1 class = "hero">Hi, User!</h1></center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class = "parent">
<div class = "circle">
</div>
<a href = "https://www.google.com"><div class = "r1c">
</div></a>
<div class = "r2c">
</div>
<div class = "r3c">
</div>
<div class = "r4c">
</div>
<div class = "r1l">
</div>
<div class = "r2l">
</div>
<div class = "r3l">
</div>
<div class = "r4l">
</div>
</div>