Obróć lub obróć obraz po najechaniu na niego

Question

Obróć lub obróć obraz po najechaniu na niego

Chcę dowiedzieć się, jak zrobić obracający się lub obracający obraz, gdy jest zawieszony. Chciałbym wiedzieć, jak emulować tę funkcjonalność za pomocą CSS na następującym kodzie:

img {
  border-radius: 50%;
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

41

css css-transitions css3 hover css-transforms

Author: web-tiki, 2014-05-16

Source

4 answers

To bardzo proste.

dodajesz obrazek.

Tworzysz właściwość css dla tego obrazu.

img { transition: all 0.3s ease-in-out 0s; }

Dodajesz taką animację:

img:hover
{
    cursor: default;
    transform: rotate(360deg);
    transition: all 0.3s ease-in-out 0s;
}

4

Author: s0h3ck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-16 19:21:16

Jeśli chcesz obracać elementy w wierszu, powinieneś najpierw ustawić element w wierszu na inline-block.

i {
  display: inline-block;
}

i:hover {
  animation: rotate-btn .5s linear 3;
  -webkit-animation: rotate-btn .5s linear 3;
}

@keyframes rotate-btn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

2

Author: Kyle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-16 19:22:33

Oto efekt automatycznego obracania i obracania zoomu przy użyciu css3

#obj1{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj1.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

#obj2{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj2.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

#obj6{
    float:right;
    width: 96px;
    height: 100px;
    -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
    animation-delay:2s;
    background-image:url("obj6.png");
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5); /* IE 9 */
    margin-bottom: 70px;
}

/* Standard syntax */
@keyframes mymove {
    50% {transform: rotate(30deg);
}

<div style="width:100px; float:right; ">
    <div id="obj2"></div><br /><br /><br />
    <div id="obj6"></div><br /><br /><br />
    <div id="obj1"></div><br /><br /><br />
</div>

Oto demo

1

Author: M. Lak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-16 19:19:06

score 99 · Accepted Answer

Możesz użyć przejścia CSS3 z rotate(), Aby obrócić obraz po najechaniu na niego .

Obracanie obrazu:

img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

<img src="http://i.imgur.com/3DWAbmN.jpg" />

Oto skrzypce DEMO

Więcej informacji i odnośników:

przewodnik o przejściach CSS na MDN
poradnik o transformacjach CSS na MDN
tabela obsługi przeglądarek dla przekształceń 2d na caniuse.com
tabela obsługi przeglądarek dla przejść on caniuse.com