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

Question

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

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

一开始我以为我可以使用 SVG 来做到这一点，我设法让 SVG 菱形变形成一个圆圈，但下一步是使用图像/ block 颜色，我认为蒙版可能是可行的方法!我得到的最接近的是: 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>