用 css 动画交换位置

Question

我正在研究悬停时的缩放 css，但我不太清楚。我认为这可以用 transform scale() 来完成，但我有很大的闪烁，因为焦点很容易在悬停时丢失。更不用说，我想要达到的效果对一张图片来说效果很差。那么让我解释一下我想做什么。

我有 2 部手机相互重叠。理想情况下，背景中的那个应该小10%左右，以达到深度感知的效果。当我将鼠标悬停在背景中的一个上时，它应该出现在前面并交换 z-index 个位置，放大回 100%，并使另一个缩小 10%（再次百分比效果）。

当我将鼠标悬停在我发回的那个上时，也会发生同样的效果，它应该回到前面的位置，依此类推。

我会接受 Javascript，但我宁愿使用纯粹的 CSS 解决方案，除非 jQuery/JS 是一项有效的努力。

这里是HTML

<div class="wrap">
  <img class="elem" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-4.png" alt="" />
  <img class="elem2" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-3.png" alt="" />
</div>

还有CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
body {
  background: #202020;
  font-family: 'Roboto', sans-serif;
}

.wrap {
  width: 50%;
  margin: 0 auto;
  position: relative;
}

.wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
}

.elem {
  margin-left: 130px;
  margin-top: 20px;
}

.elem:hover {
  zoom: 50%;
  -ms-transform: scale(2, 3);
  /* IE 9 */
  -webkit-transform: scale(2, 3);
  /* Safari */
  transform: scale(2, 3);
}

.elem2:hover {
  zoom: 150%;
  -ms-transform: scale(1.1, 1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1, 1.1);
  /* Safari */
  transform: scale(1.1, 1.1);
}

还有 CODEPEN

谢谢！

Answer 1

第一 : pure CSS JS Fiddle 1 - updated 2, 为了简单起见，我删除了前缀 CSS

    @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
    body {
      background: #202020;
      font-family: 'Roboto', sans-serif;
    }
    .wrap {
      width: 50%;
      margin: 0 auto;
      position: relative;
      z-index: 100;
    }
    .wrap img {
      position: absolute;
      top: 0;
      left: 0;
      width: 250px;
    }
    .elem {
      margin-left: 130px;
      margin-top: 20px;
      z-index: 1000;
      transition: transform 0.3s;
    }
    .elem2 {
      z-index: 10000;
      transition: margin-left, transform 0.3s;
    }
    .elem:hover {
      zoom: 50%;
      margin-left: 500px;
      margin-top: 200px;
      transform: scale(3, 3);
      z-index: 100000;
      transition: transform 0.3s;
    }
    .elem2:hover {
      zoom: 150%;
      margin-left: -50px;
      transform: scale(1.1, 1.1);
      transition: margin-left, transform 0.3s;
    }

<div class="wrap">
  <img class="elem" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-4.png" alt="" />
  <img class="elem2" src="http://www.lotusmarketingsolutions.com/wp-content/uploads/2016/01/monsters-3.png" alt="" />
</div>

更新：

第二个 : 使用 jQuery .animate() 和 .css() 函数 - .elem phone 的动画更流畅，也有更多的浏览器支持

JS Fiddle 2

var elem = $('.elem'),
  elemW = elem.width(),
  elemH = elem.height(),
  elem2 = $('.elem2'),
  elem2W = elem2.width(),
  elem2H = elem2.height();

elem.hover(function() {
  $(this).css({'z-index': '100000'}).animate({
    width: 1.5 * elemW,
    height: 1.5 * elemH,
    marginTop: '-10',
    marginLeft: '80'
  }, 300);
}, function() {
  $(this).css({'z-index': '1000'}).animate({
    width: elemW,
    height: elemH,
    marginTop: '20',
    marginLeft: '130'
  });
});

elem2.hover(function() {
  $(this).animate({
    width: 1.5 * elem2W,
    height: 1.5 * elem2H,
    marginLeft: '-50'
  }, 300);
}, function() {
  $(this).animate({
    width: elem2W,
    height: elem2H,
    marginLeft: '0'
  });
});

用 css 动画交换位置

Trading places with css animation

html

css

css-transforms