Html 倾斜动画使img运行整个页面

第一个帖子。2天前开始编码。别对我太客气了

我从字面上复制并粘贴一个代码来倾斜

img

。问题是，它运行时会抛出整个网页，直到它到达所需的位置（它的右端）。现在我只想让imag紧紧地坐在那个位置上（从来没有这样的动画），直到我跳上我的房子，瞧，倾斜

HTML:

顺便说一句，这两个图像彼此重叠，我找到的唯一解决方案是

显示：inline

一个，让另一个

浮动：left

---

提前谢谢

您正在将倾斜CSS应用于图像的父级。如果只希望图像倾斜，则只对这些图像应用倾斜CSS。因此，从div.navigation元素中删除

tilt

类：

并将其添加到每个图像中：

和

您还必须将过渡CSS移动到

.tilt:hover

选择器块中，否则图像将从正常->倾斜跳转

.tilt:hover {
  -webkit-transform: rotateX(-30deg) rotateZ(-30deg);
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms1-transition: all 0.5s linear;
}

另外，显示：inline一个图像和

float:left

另一个图像有点不好。要停止图像堆叠，只需对两个图像使用

display:inline block

：

div.face, div.linked {
  display: inline-block;
}

（您必须调整

.navigation

的边距和宽度才能成功执行此操作。）

---

这是因为一旦读取了相关代码，动画就会立即运行，这在过程中可能太早了。为了更好地计时，您可能需要使用一些JavaScript，并在所有内容都已完全加载时将动画类应用于元素。不过我也看到了一些不充分的预选。@Shikkediel，那不是真的。：hover伪类意味着只有当用户的光标位于元素内部时，转换才会运行。是的，可能是因为一个假设而跳到了那里。；-）发生在我们所有人身上！：）谢谢你，伙计。顺便说一句，你会用另一种语言制作这种动画吗？（如果不是要求太多的话，你会这么做的。）关于代码，在我将倾斜分为div.face和div.linked的那一刻，它就正常工作了。再也没有马拉松了，我们扔掉网页吧。关于堆叠，一开始我没有得到它，因为我在.navigation上已经有一个width=“128px”（每个img都是64x64），但是我把它改为300，他们停止了堆叠，不知道为什么。再一次谢谢（编辑时间已用完）

.tilt:hover {
  -webkit-transform: rotateX(-30deg) rotateZ(-30deg);
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms1-transition: all 0.5s linear;
}

div.face, div.linked {
  display: inline-block;
}