如何获得这些悬停效果，但使用钻石而不是圆圈

Question

我试图得到这个确切的效果，唯一的事情就是，我希望将图像和翻转形状像钻石而不是圆形。

任何人都知道我会怎么做。

代码就在那里，只是询问如何制作菱形元素/属性

网站＆amp;代码在这里 - http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

DIAMOND SHAPE LIKE -

Answer 1

#diamond:hover {border : 5px solid black;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-o-transform: rotate(45deg);}

Answer 2

您发布的链接中有很多演示。我刚刚选择了第一个演示作为示例。事实上，所有演示都将元素设置为圆圈，这比将元素塑造为钻石更简单。正如我之前所说，最重要的是如何渲染钻石形状，它应该有边框和内在的内容（如图像背景......）。这个要求使它变得比仅仅是一颗坚固的钻石更复杂。将元素整形为菱形后，您只需将转换scale（从正常状态下的0应用到悬停状态下的1即可。当然我们在菱形菜单项中需要很多部分，所以我们需要一些HTML元素来渲染它（1个元素和它的伪元素将无法渲染具有丰富交互和效果的复杂形状......）。这是演示代码，请注意我刚使用transform属性并使用无前缀库，您可以添加transform的更多前缀版本（例如-webkit-transform，-moz-transform ，...）如果您不想使用无前缀库：

<强> HTML ：

<div class='menu-item'>
   <div class='diamond chrome'></div>
   <div class='content'>
     <div class='diamond clipper'>
        <div class='inner-content'>
          Diamond menu item
        </div>
     </div>
   </div>
</div>    

<强> CSS ：

.menu-item {
  width:200px;
  height:200px;        
  position:relative;    
  transform: translateY(100px) 
}
/* render diamond shape */
.diamond {
  width:100%;
  height:100%;
  position:absolute;
  left:0;top:0;
  transform:rotate3d(0,0,1,45deg) skew(15deg,15deg);        
}
/* the outside chrome which has the translucent white border 
 and the background image */
.diamond.chrome {
  overflow:hidden;        
}
/* render the background */
.diamond.chrome:before {
  content:'';
  position:absolute;
  background:url(http://placekitten.com/200/200);
  background-size:100% 100%;
  width:200%;
  height:200%;
  left:50%;top:50%;
  transform:  translate(-50%,-50%) skew(-15deg,-15deg) rotate3d(0,0,1,-45deg);
  z-index:-1;
}
/* render the translucent white border */
.diamond.chrome:after {
  content:'';
  position:absolute;
  left:0;top:0;
  width:100%;
  height:100%;        
  box-shadow:0 0 0 20px rgba(255,255,255,.5) inset;
  transition:all 0.4s ease-in-out; 
}
/* animate the translucent border when hovering the menu item */
.menu-item:hover .chrome:after {
  box-shadow:0 0 0 0px rgba(255,255,255,.5) inset;
}
/* animate the inner content when hovering the menu item */
.menu-item:hover .content {        
  transform:scale(1);
  opacity:0.8;
}  
/* the content which should be scaled from 0 up to 1 
   to show up on hovering */
.menu-item .content {    
  color:white;
  opacity:0;
  font-size:20px;    
  transition:all 0.4s ease-in-out;
  transform:scale(0);    
  position:absolute;
  width:100%;
  height:100%;     
}
/* the clipper used to clip the inner content by the diamond shape */
.menu-item .clipper {
  overflow:hidden;
}
/* the inner content which contains text and other elements for interaction */
.menu-item .inner-content {
  background:teal;
  position:absolute;
  text-align:center;    
  width:200%;
  height:200%;
  left:50%;top:50%;
  transform: translate(-50%,-50%) skew(-15deg,-15deg) rotate3d(0,0,1,-45deg);
}
/* this is used to align the text vertically */
.menu-item .inner-content:before {
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle;
}

JsBin Demo