How to Rotate an Image in the Background?

Question

How to Rotate an Image in the Background?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

How I am uploading to the Image in sequence:

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

Once you figure out how to do the background rotation with CSS or not. I'll make an effect that it will spin according to the scroll,

But my focus here is how to rotate an image that is in Background, is it possible?

TheHTMLstructureisasfollows.

<divclass="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>

html css css3 background

asked by anonymous 14.10.2014 / 13:27

3 answers

1

Oops, my dear. I did not fully understand your need, but I have a suggestion. You can use CSS below to rotate a div, and use a Javascript with a timer to increment increment.

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

14.10.2014 / 14:18

1

This is a solution I found for this problem. I tried my best not to interfere with its structure. I hope I 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>

29.06.2017 / 17:49

Select certain amount of data for each type status Adding values from selected input's into another input

score 3 · Accepted Answer

Using only css with keyframes (tentative phase) ( link )

You can use the jqueryrotate plugin ( link )

$(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><scriptsrc="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>