如何制作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。