Css hover көмегімен шеңберді бұру

I created an simple website:enter image description here

Мәселен, суреттің үстінен шеңбер де бар, оны айналдыруға тырыстым, бірақ ол жай жұмыс істемейді! Құпия код!

<div class="image" id="landkreis">



Here
i am
</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 !!!!!!!!!!!!!!!!!!!!!!!!!!

Әрине, өтпелі жұмыс істейді, бірақ қалай тесікке өтуді тегіс етіп жасай аламын, содан кейін ол емтихан үшін алдымен -15deg-ден 15deg-ге айналады және ақырында 0deg-да тоқтайды?

4
сіз қандай да бір браузерде сынап жатырсыз ба?
қосылды автор Tanner, көзі
Pheeeeew сол сияқты көп жауап береді.
қосылды автор Mr. Alien, көзі
Сіз кешіктірілген өтулермен жұмыс істей аласыз (бір мемлекеттен сол күйге көшу негізінен кешіктіру)
қосылды автор kleinfreund, көзі

9 жауаптар

Егер сізге қажет болса, «15deg -15deg дейін 15deg және соңында 0deg тоқтайды»

Өзгертуіңіз керек

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);}
}
6
қосылды
@EmSta: Егер ол жұмыс істемесе, неге оны қабылдадыңыз?
қосылды автор Madara Uchiha, көзі
Кешіріңіз, бірақ жұмыс істемедік!
қосылды автор Em Sta, көзі

Префикстерді пайдаланып көрдіңіз бе?

Браузерді іске қосу кейде жаңа CSS сипаттары үшін сәл өзгеше болады. Сондықтан браузердің түрлі қозғалтқыштары пайдаланатын бірнеше префикс бар.

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

Қосымша ақпарат алу үшін caniuse.com бөлімін қараңыз.

4
қосылды

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);
}
3
қосылды

Мұнда DEMO жұмыс істейді http://jsfiddle.net/4wLpE/1/ Бірақ бұл мысалда ол тұрақты түрде ратификацияланбайды. егер қаласаңыз, маған хабарлаңыз.

  • remove h6:hover
  • add

    #motha2:hover { 
      cursor:pointer;
      transform:rotate(-90deg);
      -ms-transform:rotate(-90deg); /* IE 9 */
      -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    }
    
1
қосылды
#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);
} 

Try this http://jsfiddle.net/VbZCX/

1
қосылды

Сіздің мысалыңыз Firefox-та маған жақсы жұмыс істеді, бірақ ол браузер мәселесі болуы мүмкін. Қандай сценарий сіз қолдануға болатын css3 кодына өте тәуелді. Сондай-ақ браузердің префиксімен бірге көмектесуге болады.

Take a look at my example here http://jsfiddle.net/yJH4W/1/ it seems to work on most modern browsers. If it doesnt work for you it could be because you are on a older browser that does not support it . To see what you can use a good site is caniuse.com

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

}
0
қосылды
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}
0
қосылды
Сіз жасағаныңызды түсіндіріңіз. Кодың блогын тастау қиынға соғады (қабылданған деп белгіленсе де).
қосылды автор Madara Uchiha, көзі

I did tried it on button and should work on Images too..This is what you just need. note: this code just uses CSS and HTML to make what you want.

     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);
    }

Оны бірнеше рет қолдануға болатын керемет мүмкіндіктер бар.

Ескерту: Өткізу ұзақтығын, содан кейін тағы бір анимацияны өзгертуге болады. Сіз қоңырау шалып жатырсыз.

0
қосылды

Here you have it working for 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);}

For other browsers: http://davidwalsh.name/css-transform-rotate

Smoother.... 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);}
}
0
қосылды
Қозғалысты тегіс етіп қалай жасауға болады.
қосылды автор maqjav, көзі