防止图像失真与图像内转换div

我正在寻找一种方法来调整这个代码的背景上的变换。目标是调整占位符图像，使其位于mouseenter之前的正常位置，但仍然有div旋转，因此它是一个菱形正方形。正如您所看到的，我有一个jQuery动画也将发挥作用。这是Codepen:

http://codepen.io/pdnellius/pen/EfkHl

编辑:我已经更新了我的代码，以反映我的变化，我已经得到了90%的效果，但这感觉真的很黑客。

我不得不使用<img>标签而不是<div>上的背景图像来达到预期的效果。谁能推荐一个解决方案，可以中心<img>，同时保持比例，当它达到100%的宽度?通常我会使用带有包含属性的背景图像来实现此效果，但由于我必须使用<img>标签才能获得此效果，因此我无法做到这一点。我已经更新了上面的Codepen来反映我的进展。

<div id="wrapper">
  <div class="diamond">
    <img src="http://placekitten.com/2100/2800" class="diamond-img">
  </div>
</div>

CSS

body { margin: 0; top: 0; left: 0; right: 0; } #wrapper { margin-top: 15em; } .diamond { width: 30em; height: 30em; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; background: aquamarine; margin: 0% 50%; position: absolute; overflow: hidden; } .diamond:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } .diamond-img { height: 60em; -webkit-transform: rotate(45deg); -webkit-transform-origin-y: 30%; -webkit-transform-origin-x: 96%; }
JS
$( document ).ready(function() { $(".diamond").on("mouseenter", function(){ console.log("entered .diamond"); $(".diamond").animate({ transform: 'rotate(0deg)', transformOrigin: '0 0', margin: '0 0', width: '100%', height: '40em' }), $(".diamond-img").animate({ width: '100%', height: 'auto', transform: 'rotate(0deg)', }), $("#wrapper").animate({ marginTop: '0' }) }).on("mouseleave", function(){ $(".diamond").animate({ transform: 'rotate(-45deg)', transformOrigin: '0 100%', width: '30em', height: '30em', margin: '0 50%' }), $(".diamond-img").animate({ height: '60em', transform: 'rotate(45deg)', width: '45em', // transformOriginX: '30%', // transformOriginY: '96%' }), $("#wrapper").animate({ marginTop: '15em' }) }); });

好的，从这个网页，我们用一个:在组装前修改你的小提琴，得到这个-小提琴。

更好吗?
CSS
#wrapper { margin-top: 15em; } .diamond { position: relative; overflow: hidden; width: 30em; height: 30em; margin: 0% 50%; } .diamond:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat; background-size: cover; background-position: center; } .diamond:hover:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat; background-size: cover; background-position: center; transform: rotate(45deg); }

相关内容

最新更新

热门标签：