css3卡牌炫酷3d排列展示_CSS3炫酷鼠标滑过卡片3D翻转特效

这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时，图片被在3D空间中倾斜，当顶部滑过图片的时候，卡片平滑过渡到正常位置，卡片上的图片被缩小，同时显示出说明文字和一些链接图标。

制作方法

HTML结构

该3D卡片翻转特效的HTML结构使用HTML5

元素，卡片的文字说明和链接图标使用

元素来制作。

Hover Design Interaction

......

CSS样式

首先整个包裹元素#tri-d-wrapper被使用perspective制作为3D空间。

#tri-d-wrapper {

-webkit-perspective: 300px;

perspective: 300px;

position: absolute;

height: 100%;

width: 100%;

}

接下来

元素被绝对定位到屏幕中间，并设置了一些阴影效果。同时使用rotateX和scale将它沿X轴旋转并缩小。为了制作平滑的过渡效果，添加了transition属性。

#img-wrapper {

width: 350px;

background: #3498db;

margin: 0;

position: absolute;

cursor: pointer;

border-radius: 3px;

overflow: hidden;

top: 40%;

left: 50%;

margin-left: -175px;

margin-top: -131px;

-webkit-transform: rotateX(30deg) scale(.65);

transform: rotateX(30deg) scale(.65);

-webkit-transition: .3s all ease;

transition: .3s all ease;

box-shadow: 0 15px 20px 5px rgba(0,0,0,.2);

}

在鼠标滑过

元素的时候，rotateX被置回0度，并且scale被重置为1。

#img-wrapper:hover {

-webkit-transform: rotateX(0deg) scale(1);

transform: rotateX(0deg) scale(1);

box-shadow: none;

}

以上是鼠标滑过卡片是的3D翻转效果，其他的效果实现方法比较简单，请参考下载的源文件。