如何使菱形内的图像变形为圆形

Question

在过去的几天里，我一直在尝试使用 CSS 和 SVG 来尝试实现这种效果。

我有一个菱形图像，当用户将鼠标悬停在它上面时，它会变成一个圆圈，理想情况下，图像应该变成一个块颜色。

一开始我以为我可以使用 SVG 来实现，我设法让 SVG 菱形变形为圆形，但下一步是使用图像/块颜色，我认为蒙版可能是可行的方法！我得到的最接近的是： http://codepen.io/anon/pen/ByaaqE

HTML

<div>
  <span></span>
  <img src="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" />  
</div>

CSS

div {
    -webkit-clip-path: circle(100px at center);
    -moz-clip-path: circle(100px, 100px, 100px);
    clip-path: circle(100px, 100px, 100px);
    transition: all 0.3s ease;
    width: 200px; height: 300px;
}

div:hover {
    -webkit-clip-path: circle(40px at center);
    -moz-clip-path: circle(40px, 40px, 40px);
    clip-path: circle(40px, 40px, 40px);
}

span {
    display: block;
    width: 200px; height: 300px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    opacity: 0;
    transition: background-color 0.7s ease;
}

div:hover span {
    opacity: 1;
}

我可以为圆形制作动画，但是当我尝试将其设为矩形时，它就不起作用了（而且我什至没能看到菱形！）。

我也尝试过使用纯 CSS 方法 - 尽管这会带来一系列问题。我在 img 标签上应用了样式，它按我想要的方式工作，但显然图像是旋转的。当我尝试将图像放入 div 并将图像旋转回正常时，它出现了问题。将鼠标悬停在图像上时，尽管在 DIV 上隐藏了溢出，但它并没有进入圆圈内。

http://codepen.io/anon/pen/jEOMem

它还存在悬停时没有覆盖颜色的问题。

我想知道以前是否有人设法做到这一点，他们是否可以对此有所了解，以及我的最佳选择是什么，因为我的想法已经不多了！

Answer 1

这引起了我的兴趣，所以我想我会来一场狂欢。

backface-visibility: hidden; 是防止图像溢出其父级的关键，如您的问题中所述。

您可以使用伪元素 (:before) 进行颜色叠加：

/* FIRST EXAMPLE */
.wrap {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  float: left;
  border: 1px solid red;
  margin: 150px 0 0 150px;
  overflow: hidden;
  transition: all 0.3s ease .3s;
  border-radius: 0px;
}
.morph {
  -webkit-transform: rotate(45deg) scale(1.5);
  -moz-transform: rotate(45deg) scale(1.5);
  transform: rotate(45deg) scale(1.5);
  float: left;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.wrap:before {
  content: "";
  background: rgba(207, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
}

.wrap:hover {
  border-radius: 50%;
}

.wrap:hover:before {
  transform: scale(1);
  opacity: 1;
} 

<div class="wrap"><img src="http://placekitten.com/g/300/300" class="morph"/>
</div>