2

Como estou enviando na Imagem em sequencia:

Eu quero fazer esse globo fazer uma rotação, ele é um circulo perfeito que representa um globo mundial.

Apos descobrir como fazer a rotação do background com CSS ou não. Vou fazer um efeito de que ele irá girar de acordo com o scroll,

mas o meu foco aqui é como rotacionar uma imagem que está no Background, é possivel?

inserir a descrição da imagem aqui

As estrutura HTML está da seguinte maneira.

<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>

3 Respostas 3

3

Utilizando somente css com keyframes (fase esperimental) (https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)

pode utilizar o plugin jqueryrotate (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("https://i.sstatic.net/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>

2
  • Fala meu caro, obrigado pelo código, vou testa-lo para ver como vai ficar. Commented 14/10/2014 às 12:44
  • atualizei o exemplo um pouco mais com um plugin jquery que faz o que você precisa.
    – tinos
    Commented 14/10/2014 às 13:40
1

Opa meu caro. Não compreendi completamente a sua necessidade, mas tenho uma sugestão. Você pode utilizar o CSS abaixo para rotacionar uma div, e utilizar um Javascript com um temporizador para ir incrementando os graus.

elemento{
 transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}
3
  • Olá meu amigo, obrigado por se procupar com a pergunta. Nesse caso se eu fizer uma rotação nas Divs o proprio texto que tem nela tambem irá rotacionar junto, eu estava pensando em só rotacionar a imagem que está no background dessa DIV. EU atualizei a pergunta com o Código HTML Commented 14/10/2014 às 12:27
  • @MichaelAlves entendi, eu supus que você trabalharia com uma div para a imagem e uma para o texto, e deixaria a div de texto por cima. Essa minha suposição não pode ser aplicada ao seu caso?
    – WyllianNeo
    Commented 14/10/2014 às 12:33
  • Sua idéia realmente funcionaria, porém para que o texto não gire deveria coloca elas separadas e uma delas com o position absolute, tenha receio de quebrar o fluxo do Layout. Estou usando Bootstrap. Tenha alguma idéia de como poderia fazer isso sem quebrar o fluxo? Commented 14/10/2014 às 12:41
1

Esta é uma solução que encontrei para este problema. Tentei ao máximo não interferir na sua estrutura. Espero ter contribuído.

.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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .