如何使 css 动画仅适用于图像而不适用于其边框？

Question

我使用这种问题格式希望它更容易理解:)

问题：

我想让图像旋转，但我希望它的边框不随它旋转。看起来图像在静止的白色框架中旋转。

尝试的代码：

#skin3{
 position: relative;
 top: -71px;
 left: 115px;
 width: 95px;
 height: 100px;
 border: 2px solid white;
 padding: 5px;
 padding-right: 8px;
 padding-top: 15px;
 padding-bottom: 15px;
 cursor: pointer !important;
 margin-bottom: -160px;
 -webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

这是CSS。它在哪里说，border: 2px solid white; 它定义了边界。这个 css 旋转图像和它的边框。

HTML：

  <img src="../images/skins/skin3white.png" id="skin3" onclick="changeskin3(); location.href='profile.php'" action="changeskin3.php"/>

我不知道为什么这很重要，但它可能会有所帮助:)

结论：

我不想用 div 或其他东西创建单独的边框，所以希望这是可能的。

我刚开始使用动画，还在学习中。感谢您的帮助！

Answer 1

您所要求的设计无法实现。 CSS 是一个盒子模型系统，这意味着每个元素都有一个要在其中渲染的盒子。该盒子具有内容、填充、边框、边距和轮廓。当您向任何方向移动该框（例如变换）时，整个框都会移动。把它想象成一个装运箱，因为它有内容和边框（实际的纸板）。如果不旋转整个框，则无法旋转该框的内容。

现在，您可以将众所周知的切盒机带到那个装运箱上，然后在画布上渲染整个东西，然后自己对整个东西进行编程。但老实说，这有点矫枉过正。

相反，最好只是在盒子里面放一个盒子，然后旋转内盒子，让外盒子不动。正如@garr-godfrey 评论的那样，您知道使用第二个 div 的解决方案。