Bei Hover ich ein Bild um 45 Grad drehen und schweben wird es in die ursprüngliche Position kommen.Drehen Sie ein Bild 45 Grad und kommen Sie auf die gleiche Position auf Hover
Was ich will ist, ich möchte drehen und zurück zur ursprünglichen Position auf einem Hover selbst.
Ich versuchte in jquery, Aber etwas stimmt hier nicht.
Html-Code:
<ul class="assess-thumb-container">
<li class="assess-thumb active">
<img src="rex/assets/images/tests/eat.jpg" />
</li>
<li class="assess-thumb">
<img src="rex/assets/images/tests/diabetes.jpg" />
</li>
<li class="assess-thumb">
<img src="rex/assets/images/tests/CAT_logoSmall.png" />
</li>
<li class="assess-thumb">
<img src="rex/assets/images/tests/berlin.jpg" />
</li>
<li class="assess-thumb">
<img src="rex/assets/images/tests/smoking.jpg" />
</li>
<li class="assess-thumb">
<img src="rex/assets/images/tests/alcohol.jpg" />
</li>
</ul>
JQuery-Code:
$('.assess-thumb').hover(function() {
$(this).css({
"-webkit-transform" : "rotateY(45deg)",
"-webkit-transition" : "all .4s linear",
"-webkit-transform-origin" : "100% 100%",
"-webkit-transform-style" : "preserve-3d",
"-moz-transform" : "rotateY(45deg)",
"-moz-transition" : "all .4s",
"-moz-transform-origin" : "100% 100%",
"-moz-transform-style" : "preserve-3d",
"-ms-transform" : "rotateY(45deg)",
"-ms-transition" : "all .4s",
"-ms-transform-origin" : "100% 100%",
"-ms-transform-style" : "preserve-3d",
"transform" : "rotateY(45deg)",
"transition" : "all .4s",
"transform-origin" : "100% 100%",
"transform-style" : "preserve-3d"
});
$(this).delay(400).queue(function() {
$(this).css({
"-webkit-transform" : "rotateY(0deg)",
"-webkit-transition" : "all .4s linear",
"-webkit-transform-origin" : "100% 100%",
"-webkit-transform-style" : "preserve-3d",
"-moz-transform" : "rotateY(0deg)",
"-moz-transition" : "all .4s",
"-moz-transform-origin" : "100% 100%",
"-moz-transform-style" : "preserve-3d",
"-ms-transform" : "rotateY(0deg)",
"-ms-transition" : "all .4s",
"-ms-transform-origin" : "100% 100%",
"-ms-transform-style" : "preserve-3d",
"transform" : "rotateY(0deg)",
"transition" : "all .4s",
"transform-origin" : "100% 100%",
"transform-style" : "preserve-3d"
});
}).dequeue();