How do you create a rotating bg image with css, javascript and html?
The idea is to have the image rotate (using CSS animation) and at the same time have the image spanning the entire window during the rotation (using Javascript).
Like this:
NOTE. I would like the image to be displayed all over WINDOW at ALL TIME, so Javascript is needed to dynamically change the height and width values of the images.
+3
user3186555
source
to share
1 answer
Do it with css animation
@-webkit-keyframes rot {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rot {
0% { -moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-o-keyframes rot {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@keyframes rot {
0% {transform: rotate(0deg); }
100% {transform: rotate(360deg);}
}
#a{
position:relative;
margin:42px;
width:100px;
height:100px;
border:1px solid black;
}
#b{
position:absolute;
width:142%;
height:142%;
border:1px solid black;
left:-21px;
top:-21px;
-webkit-animation: rot 2s infinite;
-moz-animation: rot 2s infinite;
-o-animation: rot 2s infinite;
animation: rot 2s infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
background:rgba(125,0,0,.5);
}
<div id="a">
<div id="b"></div>
</div>
+2
source to share