[分享]css3怎么实现鼠标悬停翻转

CSS3是一种可以实现更加炫酷效果的样式语言，在其中可以实现鼠标悬停翻转效果。下面就来详细介绍一下如何实现。.flipbox{ :relative; width:200px; height:200px...

CSS3是一种可以实现更加炫酷效果的样式语言，在其中可以实现鼠标悬停翻转效果。下面就来详细介绍一下如何实现。

.flipbox{
  position:relative;
  width:200px;
  height:200px;
  transition:transform 0.6s;
  transform-style:preserve-3d;
}

.flipbox:hover{
  transform:rotateY(180deg);
}

.flipbox .front, .flipbox .back{
  position:absolute;
  width:100%;
  height:100%;
  backface-visibility:hidden;
}

.flipbox .front{
  z-index:2;
  background-color:#ccc;
}

.flipbox .back{
  transform:rotateY(180deg);
  background-color:#ff6666;
} 

以上是实现鼠标悬停翻转效果的CSS3代码，其中flipbox类是需要翻转的元素类，使用position:relative使其相对于文档流定位，同时使用width和height属性设定其尺寸大小；transition属性让属性变化更加平滑，同时通过transform-style属性设置元素的子元素也可以使用3D变换，达到更好的效果。

而在hover状态下设定翻转角度为180度，则可以实现鼠标悬停翻转效果。在flipbox类中还设定了前面和背面的元素类，通过使用transform属性，让背面元素在翻转后可见，并且使用z-index属性，让前面元素覆盖在背面元素上面，让整个翻转效果更加完美。