4

The idea is to have an image spin (using CSS animations) and at the same time have the image cover the whole window at all times while spinning (using Javascript).

Like this:

enter image description here

NOTE: I would like to have the image span the ENTIRE WINDOW at ALL TIMES so Javascript is needed to dynamically modify the images height and width values.

  • 1
    one is for sure, the image got to be at least 1.414213562 times bigger than the window width ( root 2 ). – loveNoHate Oct 05 '14 at 04:33
  • 3
    @DOCASAREL Not necessarily; In my scenario, I need precision, so that will not apply to all cases. –  Oct 05 '14 at 04:36
  • 1
    IMHO animations on web sites should be minimal at best. Many people find them irratting – Ed Heal Oct 05 '14 at 05:18
  • The size of the background image, a square, can be determined using an online **[Pythagorean Theorem Calculator](https://www.google.com/search?q=Pythagorean+theorem+calculator)**. Just enter for `a` and `b` (aka x and y) the dimensions of the `div` element or browser viewport to get your answer. My old **[Stackoverflow Answer](http://stackoverflow.com/a/11336910/1195891)** does the opposite of what your doing in that it rotates the `div` itself. – arttronics Oct 05 '14 at 08:01

1 Answers1

3

Do it using 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>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188