html - 我怎样才能让一个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 是一个盒子模型系统，这意味着每个元素都有一个盒子来渲染。那个盒子有内容、填充、边框、边距和轮廓。当您向任何方向移动该框(例如变换)时，整个框都会移动。从字面上看，它就像一个装运箱，因为它有内容和边框(实际的纸板)。如果不旋转整个盒子，就无法旋转该盒子的内容。

现在，您可以对那个装运箱使用众所周知的裁箱机，然后在 Canvas 上渲染整个东西，然后自己对整个东西进行编程。但老实说，这太过分了。

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