Обернути круг із наведенням CSS

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, джерело
додано Автор Kilian Stinson, джерело
Ви можете працювати з затримкою переходів (перехід від одного стану до одного стану в основному є затримкою)
додано Автор kleinfreund, джерело

9 Відповіді

Якщо вам потрібно "обертається -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, джерело