如何将钻石形状内的图像变为圆形？

Question

如何将钻石形状内的图像变为圆形？

htmlcsssvgcss-shapes

3

在过去的几天里，我一直在尝试使用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

它还存在一个问题，就是没有悬停时的叠加颜色。我想知道是否有人之前做过这个效果，能否给予一些提示，以及我的最佳选择是什么，因为我已经没有更多的想法了！

- user1788364

1

钻石形状可能有些棘手，但也许这个链接可以帮到你：http://codepen.io/anon/pen/jEOMgG - Paul

谢谢Paul，你的帮助真的很有用！使用你的笔，这就是我想出来的！ - user1788364

http://codepen.io/anon/pen/MYWbpq - user1788364

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Turnip · Accepted Answer

这激发了我的兴趣，所以我想试一下。 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>