使用 CSS 悬停就地旋转 div

Posted 2023-05-08

【中文标题】使用 CSS 悬停就地旋转 div

【英文标题】：In place rotate a div with CSS hover

【发布时间】：2018-08-06 13:54:33

【问题描述】：

我想旋转 .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;
    
  

那里。

【问题讨论】：

能否提供一些代码 sn-p 以便我们为您提供帮助

欢迎来到 Stack Overflow！寻求调试帮助的问题应包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example.

Spin or rotate an image on hover的可能重复

上面有一个jsfiddle链接。

【参考方案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

【讨论】：

感谢您的宝贵时间和帮助。这解决了它。该死的 transform-origin 属性。

@r_andrini 如有疑问，只需应用所有内容，即使看起来多余。