Question

我正在寻找一种方法来调整此codepen的背景变换。我们的目标是调整占位符图像，使其位于mouseenter之前的正常位置，但仍然可以旋转div，使其成为菱形方块。正如你所看到的，我有一个jQuery动画也将发挥作用。这是Codepen：

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

编辑：我已经更新了我的代码以反映我所做的更改，这些更改在那里获得了90％的效果，但这感觉真的很烦人。

我必须在<img>上使用<div>标记而不是背景图像才能达到预期的效果。任何人都可以推荐一个可以使<img>居中的解决方案，同时在宽度达到100％时保持比例吗？通常我会使用带有包含属性的背景图片来实现此效果，但由于我必须使用<img>标记才能使效果正常工作，我无法做到这一点。我已更新上面的Codepen以反映我的进展。

HTML

<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'
    })
  });
});

Answer 1

好的，在THIS网页上，我们会修改你的小提琴：在kludge之前得到这个 - FIDDLE。

还好吗？

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);
}

使用转换后的div中的图像防止图像失真？

1 个答案: