Question

第一篇文章。 2天前开始编码。不要轻易放弃我！

我实际上复制+粘贴代码以倾斜img问题是它运行抛出整个网页，直到它落在欲望点（它的右端）。现在我想要的只是那个地方的形象很紧张（没有任何动画），直到我跳上我的房子，vo，T T T T <！

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。

提前致谢！

Answer 1

您正在将倾斜CSS应用于图片的父。如果您只想倾斜图像，则只将倾斜CSS应用于这些图像。所以从div.navigation元素中删除tilt类：

<div class="navigation <击> tilt ">

并将其添加到您的每张图片中：

<div class="face tilt">和<div class="linked tilt">

您还必须将转换CSS移动到.tilt:hover选择器块，否则您的图像将从正常跳转 - ＆gt;倾斜。

.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/

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

1 个答案: