css制作流程卡片,css3卡片效果制作代码实例

Insert title here

/* 顶部的盒子 */

.container{

width:1320px;

margin:50px auto;

}

/* 翻转类样式 */

.flip{

width:640px;

height: 320px;

margin:10px;

float:left;

position: relative;

}

/* 前后两个类的共同样式 */

.flip div{

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

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

}

/* 提示文本利用：before伪对象到位 */

.flip div:before{

content:attr(data-text);

width:100%;

height:30px;

position:absolute;

left:0;

bottom:0;

line-height:30px;

text-align:center;

color:#fff;

background-color:rgba(0,0,0,.3);

}

/* 分别设置前后两个类的背景图像，垂直位置 */

.flip div.front{

background: url(http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);

z-index: 1;

}

.flip div.back{

background: url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);

z-index: 2;

}

/* 翻转类样式 */

.flip{

/*其他代码略*/

/* 设置景深 */

perspective: 1000px;

}

/* 前后两个类的共同样式 */

.flip div{

/*其他代码略*/

transition: all 1s ease;

transform-style: preserve-3d;

backface-visibility: hidden;

}

/* hover之后的垂直位置 */

.flip:hover div.front{ z-index: 2;;}

.flip:hover div.back{ z-index: 1;;}

/* rotateY的响应 */

.Y div.back{ transform:rotateY(180deg);}

.Y:hover div.front{ transform:rotateY(180deg);}

.Y:hover div.back{ transform:rotateY(0deg);}

/* rotateX的响应 */

.X div.back{ transform:rotateX(180deg);}

.X:hover div.front{ transform:rotateX(180deg);}

.X:hover div.back{ transform:rotateX(0deg);}