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

第一篇文章。 2天前开始编码。别对我放松！

我从字面上复制并粘贴代码以倾斜img的问题是它运行时会抛出整个网页，直到它到达期望的位置（它的右端）为止。现在，我想要的是imag紧紧地固定在那个地方（从来没有动画过），直到我跳开房子，瞧瞧，TILT！

HTML：

<div class="navigation tilt">
  <div class="face">
    <a href="http://www.facebook.com" target="_blank">
      <img src="/images/facebook-icon.png" alt="Facebook Me" style="width: 64px; height: 64px; border: 0px"></a>
  </div>
  <div class="linked">
    <a href="http://www.linkedin.com" target="_blank"><img src="/images/linkedin-icon.png" alt="LinkedIn Me" style="width: 64px; height: 64px; border: 0px"></a>
  </div>
</div>

的CSS

.navigation {
  text-align: center;
  margin-left: 88%;
  width: 128px;
}

.linked {
  display: inline;
}

.face {
  float: left;
}

.navigation {
  cursor: pointer;
  position: relative;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
}

.tilt:hover {
  -webkit-transform: rotateX(-30deg) rotateZ(-30deg);
}

顺便说一句，两张图片彼此重叠，我发现的唯一解决方案是display: inline一个并制作另一个float: left。

提前致谢！

最佳答案

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

<div class="navigation tilt ">

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

<div class="face tilt">和<div class="linked 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;
}

http://jsfiddle.net/ohk9wa4c/

同样，display: inline一个图像和float: left另一个图像有点不好。要阻止图像堆叠，只需对两个图像使用display: inline-block：

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

（您必须调整.navigation的边距和宽度才能成功。）

http://jsfiddle.net/ohk9wa4c/1/