Efeito nas mensagens de categorias

Qual é minha questão:
Ola, observem as categorias deste fórum: http://fairytail-xtreme.ativoforum.com/forum
percebam que ao passar o mouse por cima das imagens das categorias eles giram e aparece outra.gostaria do código utilizado para este efeito( se possivel em html, para eu poder usar em postagens normais por meu fórum.)

Endereço do meu fórum:
http://rpgadventure.umforum.net

Versão do fórum:
PHPBB2

Olá,

Código HTML:

Código:

<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/regras10.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/jkcasc10.png" style="margin-top:-8px; margin-left:-8px" align="center">
   </div>


</div>
</div>

CSS:

Código:

div.flip {-webkit-perspective: 600px;height: 72px;position: relative;width: 450px;}
div.flip:hover > div.rotate.x {-webkit-transform: rotateX(180deg);}
div.flip div.rotate {-webkit-transform-style: preserve-3d;height: 100%;transition: all 0.3s ease-in-out 0.3s;-webkit-transition-property: all;-webkit-transition-duration: 0.3s;-webkit-transition-timing-function: ease-in-out;-webkit-transition-delay: 0.3s;width: 100%;}
div.flip div.rotate > * {-webkit-backface-visibility: hidden;height: 100%;position: absolute;width: 100%;}
div.rotate.x :nth-child(2) {-webkit-transform: rotateX(180deg);}
div.flip div.rotate > div {background: rgb(238, 238, 238);box-sizing: border-box;padding: 8px;}

O Efeito funcionará nos tópicos, basta instalar o HTML no tópico e o CSS na sua Folha de Estilo CSS.

Até mais.

ola ate que funcionou, mas de forma errada-
aparece as duas imagens ao mesmo tempo(uma em cima e a outra em baixo)e ao passar o mouse em cima acontece o efeito mas não aparece mais nada.

Olá,
Poderia nos informar o tópico que utilizou o tal código? Para que eu possa verificar qual seria o problema.

Até mais.

Saudações senhor!

Aceda à sua "Folha de estilo CSS":
Painel de Controle Visualização Imagens e Cores Cores Aba 'Folha de estilo CSS'

Substitua o código do BrunoH. por este:

Código:

div.flip{-moz-perspective:600px;-o-perspective:600px;-webkit-perspective:600px;height:72px;perspective:600px;position:relative;width:450px}div.flip div.rotate{-moz-transform-style:preserve-3d;-moz-transition:all .3s ease-in-out .3s;-o-transform-style:preserve-3d;-o-transition:all .3s ease-in-out .3s;-webkit-transform-style:preserve-3d;-webkit-transition:all .3s ease-in-out .3s;height:100%;transform-style:preserve-3d;transition:all .3s ease-in-out .3s;width:100%}div.flip div.rotate > *{-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}div.flip div.rotate > div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#eee;box-sizing:border-box;padding:8px}div.rotate.x :nth-child(2){-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.flip:hover > div.rotate.x{-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.rotate.y :nth-child(2){-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}div.flip:hover > div.rotate.y{-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}

Valide!

No tópico, na descrição da categoria, fórum ou sub-fórum use este código HTML:

Código:

<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/regras10.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/jkcasc10.png" style="margin-top:-8px; margin-left:-8px" align="center">
   </div>


</div>
</div>

Aceda à suas "Categorias e Fóruns":
Painel de Controle Geral Fórum Categorias e Fóruns Clique no botão da categoria, fórum ou sub-fórum desejado para adicionar o efeito e coloque o código HTML acima.

Lembre-se de ativar o HTML por completo.

1 - Activar o HTML no Painel de Controle:
Painel de Controle ->> Geral ->> Fórum ->> Mensagns, MP e Email
Agora terá de activar a opção: "Permitir HTML".

2 - Activar o HTML no perfil de usuário: (não é no Painel de Controle)
Perfil ->> Preferências
Activar a opção "Sempre permitir HTML".

3 - Activar o HTML nos tópicos e mensagens: (não é no Painel de Controle)
Tópico ou Mensagem ->> Opções ->>
Não marcar a opção "Desativar códigos HTML nesta mensagem".

Atenciosamente!

ainda apresenta o mesmo erro:

http://rpgadventure.umforum.net/t9-como-fazer-pedidos#65

desçam um pouco, esta na resposta ao tópico

Olá!

Em Painel de Controle > Geral > Fórum > Categorias e Fóruns > Selecione o subfórum > e em sua descrição, adicione:

<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x"> <img src="URL_DA_PRIMEIRA_IMAGEM">
<div>

<img src="URL_DA_SEGUNDA_IMAGEM" style="margin-top:-8px; margin-left:-8px" align="center" />
</div>


</div>
</div><div class="flip" style="width: 20px; height: 10px; display: inline-block;"><div class="rotate y">

</div>
</div>

Adicione em seguida, o CSS indicado por Dr.House em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilos CSS >.

Até mais!

ainda apresenta erro, parecido com o anterior, mas desta vez uma imagem tem metade sua coberta pela outra

Olá,

Código HTML

Código:

<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/10310.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/310.png" style="margin-top:-8px; margin-left:-8px" align="center">
   </div>


</div>
</div>

Código CSS

Código:

div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:72px;
perspective:600px;
position:relative;
width:450px;
}
div.flip div.rotate {
-moz-transform-style:preserve-3d;
-moz-transition:all .3s ease-in-out .3s;
-o-transform-style:preserve-3d;
-o-transition:all .3s ease-in-out .3s;
-webkit-transform-style:preserve-3d;
-webkit-transition:all .3s ease-in-out .3s;
height:100%;
transform-style:preserve-3d;
transition:all .3s ease-in-out .3s;
width:100%;
}
div.flip div.rotate > * {
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
height:100%;
position:absolute;
width:100%;
}
div.flip div.rotate > div {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background:#eee;
box-sizing:border-box;
padding:8px;
}
div.rotate.x :nth-child(2) {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg)
}
div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.rotate.y :nth-child(2) {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}

Resulta?


Até mais...

ola, ainda com o mesmo erro, aparace as duas imagens, uma em cima e outra em baixo, eu gostaria que a primeira imagem foce a que estivesse normal, e quando bota o mouse em cima da primeira "roda" e aparece a segunda, vocês estão tentando fazer isto? porque foi o que eu pedi desde o começo( percebi que no html não tem nenhum comando "hover" ou algo do tipo, para especificar a imagem que ira surgir depois de colocar o mouse ._. )

Olá!

Aceda a categoria que deseja fazer o efeito.

Painel Geral Fórum Categorias e subfóruns

Procure pelo subfórum desejado clique em modificar e bote isso na descrissão

Código:

<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


   <img src="http://i48.servimg.com/u/f48/16/88/27/59/regras10.png">



   <div>
   
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/jkcasc10.png" style="margin-top:-8px; margin-left:-8px" align="center" />
   </div>


</div>
</div><div class="flip" style="width: 20px; height: 10px; display: inline-block;"><div class="rotate y">
</div>
</div><style>.pun table .dtcr{-webkit-box-shadow:5px 0 5px #00E;background:url(http://i48.servimg.com/u/f48/16/58/89/73/alt210.gif)repeat top center;border-radius:0 15px 0 0;border-top:10px #E3D9C7;box-shadow:5px 5px 5px #00E;font-size:10px;font-style:oblique;margin-left:80px;text-align:center;width:58%}div.flip{-moz-perspective:600px;-o-perspective:600px;-webkit-perspective:600px;height:72px;perspective:600px;position:relative;width:450px}div.flip div.rotate{-moz-transform-style:preserve-3d;-moz-transition:all .3s ease-in-out .3s;-o-transform-style:preserve-3d;-o-transition:all .3s ease-in-out .3s;-webkit-transform-style:preserve-3d;-webkit-transition:all .3s ease-in-out .3s;height:100%;transform-style:preserve-3d;transition:all .3s ease-in-out .3s;width:100%}div.flip div.rotate > *{-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;height:100%;position:absolute;width:100%}div.flip div.rotate > div{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:#eee;box-sizing:border-box;padding:8px}div.rotate.x :nth-child(2){-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.flip:hover > div.rotate.x{-moz-transform:rotateX(180deg);-o-transform:rotateX(180deg);-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}div.rotate.y :nth-child(2){-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}div.flip:hover > div.rotate.y{-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}blockquote,blockquote blockquote,blockquote blockquote blockquote{-moz-border-radius:6px;-moz-box-shadow:2px 2px 2px #a8a180;-webkit-border-radius:6px;-webkit-box-shadow:2px 2px 2px #a8a180;background:-moz-linear-gradient(#f2f2f2,#ffffff);background-color:#fff;background-image:-webkit-linear-gradient(#f2f2f2,#ffffff);border:1px solid #a8a180;border-radius:6px;box-shadow:2px 2px 2px #a8a180;font-size:11px;margin:0;padding:10px;width:90%}</style>

Até mais.

Troque o código CSS por este

Código:

div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:130px;
perspective:600px;
position:relative;
width:450px;
}

Resulta?


Até mais...

ainda o mesmo problema , as duas imagens aparecem "juntas", ao mesmo tempo e quando põe o mouse por cima delas elas giram, é para aparecer só "uma", e depois que colocar o mouse por cima, aparecer a outra.

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS
e adicione este código

Código:

div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:130px;
perspective:600px;
position:relative;
width:450px;
}

Olá querido,

Você testou o codigo nas categorias? Aqui funcionou perfeitamente da mesma versão que a sua veja

http://snapshot.forumeiros.com/forum

Pode deixar o codigo ativo para que eu possa indentificar o erro?

Até mais.

cara, eu ja escrevi la no começo que não pretendo usar nas categorias, e sim em posts -.-'

Amigo troque o código por este, basta você adicionar esse código em um tópico

Código:

<style>div.flip:hover > div.rotate.x {
-moz-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
-webkit-transform:rotateX(180deg);
transform:rotateX(180deg);
}
div.flip:hover > div.rotate.y {
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
div.flip {
-moz-perspective:600px;
-o-perspective:600px;
-webkit-perspective:600px;
height:130px;
perspective:600px;
position:relative;
width:450px;
}</style>
<div class="flip" style="display: inline-block; margin-right: 40px"><div class="rotate x">


  <img src="http://i48.servimg.com/u/f48/16/88/27/59/10310.png">



  <div>
 
      <img src="http://i48.servimg.com/u/f48/16/88/27/59/310.png" style="margin-top:-8px; margin-left:-8px" align="center">
  </div>


</div>
</div>

Resulta?


Até mais...

Olá, tente este código

Código:

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">  <a rel="nofollow" title="" href="#" target="_blank"><img border="0" src="ENDEREÇO_DA_IMAGEM" style="margin-right:1px;" alt="Icon"/></a>

mas neste so mostra uma imagem ._.
eu quero: imagem1 ->"põe mouse em cima"-> imagem2