cercle avec vol stationnaire

css J'ai créé un site web simple: enter image description here cercle avec vol stationnaire

Donc, il y a un cercle au-dessus d'une image, j'ai essayé de le faire tourner sur le vol stationnaire, mais il suffit de coutume a marché! Voici mon code!

<div class="image" id="landkreis"> 
<img src="reg.png" alt="" width="100%" height="auto" /> 
<span id="motha2"> 
<h6><br>Here<br>i am</h6> 
</span> 
</div> 

h6 {text-align:center; 
color:#f2f2f2; 
font-size: 75px; 
line-height: 74px; 
font-weight:700; 
margin: 0 5px 24px; 
font-family: 'Route';} 

#motha2 { 
position: absolute; 
top: 1px; 
left: 15%; 
width: 300px; 
height:300px; 
border-radius: 150px; 
background-color:#4ec461 ; } 

h6:hover {transform:rotate(-90deg);}

UPDATEUPDATE !!!!!!!!!!!!!!!!!!!!!!!!!!

Ok, la transition fonctionne, mais comment puis-je faire la transition de trou lisse et que, par exemple, il tourne d'abord -15deg puis 15deg et s'arrête finalement à 0deg?

Source

2013-06-21 Em Sta

testez-vous dans un navigateur spécifique ou est-il présent dans tous? – Tanner

Pheeeeew tant de réponses avec la même chose .. –

Vous pourriez travailler avec des transitions retardées (la transition d'un état au même état est fondamentalement un retard) – kleinfreund

Si vous avez besoin "tourne un -15 ° puis à 15deg et arrête enfin à 0deg"

Vous devez changer

h6:hover {transform:rotate(-90deg);}

h6:hover { 
    -moz-animation-name: rotate 1s linear 1; 
    -webkit-animation-name: rotate 1s linear 1; 
    animation-name: rotate 1s linear 1; 
} 
@-moz-keyframes rotate { 
    0%, 100% {-moz-transform: rotate(0deg);} 
    33% {-moz-transform: rotate(15deg);} 
    66% {-moz-transform: rotate(-15deg);} 
} 
@-webkit-keyframes rotate { 
    0%, 100% {-webkit-transform: rotate(0deg);} 
    33% {-webkit-transform: rotate(15deg);} 
    66% {-webkit-transform: rotate(-15deg);} 
} 
@keyframes rotate { 
    0%, 100% {transform: rotate(0deg);} 
    33% {transform: rotate(15deg);} 
    66% {transform: rotate(-15deg);} 
}

Source

2013-06-21 09:00:24 Sivan

désolé mais n'a pas travaillé! –

@EmSta: Si cela n'a pas fonctionné, pourquoi l'avez-vous accepté? –

Avez-vous essayé d'utiliser les préfixes?

L'implémentation du navigateur est parfois légèrement différente pour les nouvelles propriétés CSS. C'est pourquoi il y a quelques préfixes utilisés par les différents moteurs de navigateur.

h6:hover { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform:  rotate(-90deg); 
    -o-transform:  rotate(-90deg); 
    transform :  rotate(-90deg); 
}

Voir caniuse.com pour plus d'informations.

Source

2013-06-21 08:05:09

#motha2:hover { 
position: absolute; 
top: 1px; 
left: 15%; 
width: 300px; 
height:300px; 
border-radius: 150px; 
background-color:#4ec461 ; 
-webkit-transform: rotate(7deg); 
-moz-transform: rotate(7deg); 
-ms-transform:  rotate(7deg); 
-o-transform:  rotate(7deg); 
transform :  rotate(7deg); 
}

Essayez cette http://jsfiddle.net/VbZCX/

Source

2013-06-21 08:06:26 copypaste

DEMO

CSS:

div{ 
    border-radius:50%; 
    width:200px; 
    height:100px; 
    background-color:green; 
    text-align:center; 
} 
.rotate{ 
    -webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 

    overflow:hidden; 

    } 

.rotate:hover 
{ 
    -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
}

Source

2013-06-21 08:07:50 Aravind30790

Ici vous avez fonctionner pour Chrome: Chrome test

h6 {text-align:center; 
    color:#f2f2f2; 
    font-size: 75px; 
    line-height: 74px; 
    font-weight:700; 
    margin: 0 5px 24px; 
    font-family: 'Route'; 
    display: block; 
} 

#motha2 { 
    position: absolute; 
    top: 1px; 
    left: 15%; 
    width: 300px; 
    height:300px; 
    border-radius: 150px; 
    background-color:#4ec461 ; } 

#motha2:hover {-webkit-transform:rotate(-90deg);}

Pour les autres navigateurs: http://davidwalsh.name/css-transform-rotate

.... Lisseur Test in Chrome

#motha2:hover { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-fill-mode: forwards; 
} 

@-webkit-keyframes rotate { 
    from {-webkit-transform: rotate(0deg);} 
    to {-webkit-transform: rotate(90deg);} 
}

Source

2013-06-21 08:08:19 maqjav

Ajouté comment rendre le mouvement plus fluide. – maqjav

Votre exemple fonctionnait très bien pour moi dans Firefox, il pourrait cependant être un problème de navigateur. Le navigateur sur lequel vous êtes est très dépendant du code css3 que vous pouvez utiliser. L'utilisation de préfixes de navigateur pourrait également aider.

Jetez un oeil à mon exemple ici http://jsfiddle.net/yJH4W/1/ il semble fonctionner sur la plupart des navigateurs modernes. Si cela ne fonctionne pas pour vous, c'est peut-être parce que vous utilisez un navigateur plus ancien qui ne le supporte pas. Pour voir ce que vous pouvez utiliser un bon site est caniuse.com

h6:hover { 
    -webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-ms-transform:  rotate(-90deg); 
transform :  rotate(-90deg); 

}

Source

2013-06-21 08:08:54

h6 {text-align:center; 
color:#f2f2f2; 
font-size: 75px; 
line-height: 74px; 
font-weight:700; 
margin: 0 5px 24px; 
font-family: 'Route'; 
-webkit-transition-duration: 0.8s; 
    -moz-transition-duration: 0.8s; 
    -o-transition-duration: 0.8s; 
    transition-duration: 0.8s; 

    -webkit-transition-property: -webkit-transform; 
    -moz-transition-property: -moz-transform; 
    -o-transition-property: -o-transform; 
    transition-property: transform; 

    overflow:hidden; 
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf 
} 

#motha2 { 
position: absolute; 
top: 1px; 
left: 15%; 
width: 300px; 
height:300px; 
border-radius: 150px; 
background-color:#4ec461 ; } 

h6:hover { -webkit-transform:rotate(360deg); 
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg); 
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf}

Source

2013-06-21 08:12:36 falguni

S'il vous plaît expliquer ce que vous avez fait. Lancer un bloc de code n'est guère utile (même s'il est marqué comme accepté). –

est ici le travail DEMOhttp://jsfiddle.net/4wLpE/1/ Mais dans cet exemple son pas ratating en continu. Si vous le voulez, faites le moi savoir.

supprimer H6: hover

ajouter

#motha2:hover { 
    cursor:pointer; 
    transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); /* IE 9 */ 
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
}

Source

2013-06-21 08:15:03 spring

je ne l'ai essayé sur le bouton et devrait fonctionner sur les images too..This est ce que vous avez juste besoin. note: ce code utilise simplement CSS et HTML pour faire ce que vous voulez.

 input#round{ 
    width:100px; /*same as the height*/ 
    height:100px; /*same as the width*/ 
    background-color:#05B7FF; 
    border:1px solid #05B7FF; /*same colour as the background*/ 
    color:#fff; 
    font-size:1.6em; 

    /*initial spin*/ 
     -moz-transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
    /*set the border-radius at half the size of the width and height*/ 
    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    /*give the button a small drop shadow*/ 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0, .75); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0, .75); 
    box-shadow: 2px 2px 15px rgba(0,0,0, .75); 

    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; 

-o-transition-property:width,height,-o-transform,background,font-size,opacity,color; 
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s; 

-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color; 
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s; 

transition-property:width,height,transform,background,font-size,opacity; 
transition-duration:1s,1s,1s,1s,1s,1s; 



display:inline-block; 

    } 
    /***NOW STYLE THE BUTTON'S HOVER STATE***/ 
    input#round:hover{ 
    background:#007DC5; 
    border:1px solid #007DC5; 
    /*reduce the size of the shadow to give a pushed effect*/ 
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75); 
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75); 
    box-shadow: 0px 0px 5px rgba(0,0,0, .75); 


    -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
transform: rotate(0deg); 
    }

Il a plusieurs autres belles caractéristiques comme l'effet poussé.Worth try.Gracious.

note: Vous pouvez modifier la durée de la transition, puis une autre animation.Vous appelez.

Source

2013-06-21 10:03:18

cercle avec vol stationnaire

Répondre

Questions connexes