使用 CSS 悬停就地旋转 div

Question

我想旋转 .profile__photo--border-2 div，但它一直在平移。而且它根本不旋转。

这是代码。

也许我做错了什么。

JSfiddle code

  &__photo {
    position: relative;
    z-index: 3;

    &--border-1, 
    &--border-2 {

      position: absolute;
      height: 110px;
      width: 110px;

      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      border-radius: 50%;
      border-width: 1px;
      border-style: solid;
      border-color: rgb(37, 184, 184) rgb(37, 184, 184) rgb(37, 184, 184) transparent;
      transition: all 1.5s ease-in-out;

    }

    &--border-2 {
      height: 120px;
      width: 120px;
      border-color:rgb(37, 184, 184) transparent rgb(37, 184, 184) rgb(37, 184, 184);
    }


    &--border-2:hover {
      /* Something wrong going on here */
      width: 120px;
      height: 120px;
      transform-origin: 0 0;
      transform: rotateZ(360deg);
    }
    & img {
      height: 100px;
      width: 100px;
      border-radius: 50%;
      z-index: 3;
    }
  }

那里。

Answer 1

你错过了一些东西。

http://jsfiddle.net/Lpavdvko/

&--border-1, 
&--border-2 {

  position: absolute;
  height: 110px;
  width: 110px;

  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0); <---- new rotate
  cursor: pointer;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(37, 184, 184) rgb(37, 184, 184) rgb(37, 184, 184) transparent;
  transition: all 1.5s ease-in-out;

}

&--border-2:hover {
  /* Something wrong going on here */
  transform-origin: 50% 50%; <---- guessing you want to rotate in the center
  transform: translate(-50%, -50%) rotate(360deg) ; <------ needed to maintain translation
}