如何设置悬停效果（注意：只有方形边框在悬停时应该像钻石形状一样旋转，而不是图像）[关闭]

Posted 2023-03-06

【中文标题】如何设置悬停效果（注意：只有方形边框在悬停时应该像钻石形状一样旋转，而不是图像）[关闭]

【英文标题】：how to set hover effect (NOTE: ONLY THE SQUARE BORDER SHOULD ROTATE LIKE DIAMOND SHAPE WHEN HOVERING, NOT THE IMAGE) [closed]

【发布时间】：2021-07-10 08:33:43

【问题描述】：

THIS IS THE IMAGE

边框应该像菱形一样旋转，但 div 元素内的图像不应该旋转。我附上了图片和代码。请通过并帮助我。

对我来说，图像也在旋转。

<!--html CODE-->
 <div class="section-1">
  <div class="support-sec-img">
   <img src="images\free-support.png" >
  </div>
 </div>


/* CSS CODE */
.support-sec-img  
    border: 1px solid #e5e5e5; 
    width: 73px; 
    height: 73px; 
    margin: auto; 
    display: flex;
    justify-content: center; 
    align-items: center; 


.section-1:hover .support-sec-img   
    transform: rotate(-45deg); 
    border: 1px solid #e95c4e;

【参考方案1】：

用svg更改了img，但系统很简单。如果逆时针旋转框，则必须顺时针将图标向后旋转。

.support-sec-img  
    border: 1px solid #e5e5e5; 
    width: 73px; 
    height: 73px; 
    margin: auto; 
    display: flex;
    justify-content: center; 
    align-items: center; 


.section-1:hover .support-sec-img   
    transform: rotate(-45deg); 
    border: 1px solid #e95c4e;


.section-1:hover .support-sec-img svg  
    transform: rotate(45deg); 

 <div class="section-1">
  <div class="support-sec-img">
   <svg   xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181"/></svg>
  </div>
 </div>

【讨论】：

哇，非常感谢 :) 这太完美了