How to Rotate an Image in the Background?

Question

How I’m sending in Image in sequence:

I want to make this globe do a rotation, it’s a perfect circle representing a world globe.

After figuring out how to rotate the background with CSS or not. I will make an effect that it will rotate according to the scroll,

but my focus here is how to rotate an image that’s in the Background, it’s possible?

The HTML structure is as follows.

<div class="row first-conteudo"><!-- Div que tem o Background -->
    <div class="first-cont-text text-center center-block">
        <h2>Eficiência, Agilidade e Segurança</h2>
        <p>Muito além de somente reciclar, a MDE busca o perfeito funcionamento do processo de reciclagem, integrando-o ao meio ambiente e à sociedade. Economicamente viável, ambientalmente correta e socialmente justa.</p>
    </div>
</div>

Answer 1

Using only css with keyframes (experimental phase) (https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)

can use jqueryrotate plugin (https://code.google.com/p/jqueryrotate/)

$(window).on('scroll', function(e){
  
  var scrollTop = $(this).scrollTop();//0 -> 85
  
  var rotate = scrollTop * 180 / 85;
  
  
  $('.animate-js').rotate({animateTo:rotate})
  
});

.image {
    background-image:  url("http://i.stack.imgur.com/KGrjz.png");
    background-size: 200px 200px;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}
.animate-css{
    float:left;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
  }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.animate-js {
    float: right;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<div class="image animate-css" >
    
</div>

<div class="image animate-js" >
  
  
    
</div>
<div>
  
<p>dfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg  ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg  ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg  ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg  ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg ddfg dfgdfgdsfg dsgf dsfg sdfg d</p>
  </div>

Answer 2

This is a solution I found for this problem. I tried my best not to interfere in its structure. I hope to have contributed.

.first-conteudo {
  padding: 3em;
  position: relative;
  overflow: hidden;
}

.first-conteudo:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url(http://biologiaambiental-ufal2008.wikidot.com/local--files/nav:side/not_2[1].gif) no-repeat center center;
  background-size: 200px;
  z-index: -1;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.first-conteudo:hover:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

<div class="row first-conteudo">
  <!-- Div que tem o Background -->
  <div class="first-cont-text text-center center-block">
    <h2>Eficiência, Agilidade e Segurança</h2>
    <p>Muito além de somente reciclar, a MDE busca o perfeito funcionamento do processo de reciclagem, integrando-o ao meio ambiente e à sociedade. Economicamente viável, ambientalmente correta e socialmente justa.</p>
  </div>
</div>

Answer 3

Oops, my good man. I didn’t fully understand your need, but I have a suggestion. You can use the CSS below to rotate a div, and use a Javascript with a timer to increase degrees.

elemento{
 transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}