html 翻转卡片效果,css3 卡牌翻转效果

利用hover控制动画，一个从反面向正面翻，一个从正面向反面翻。

利用：backface-visibility: hidden;控制反面的元素不显示。

不支持的浏览器直接切换层级换图(部分ie9模拟器不支持)

css3双面翻转

*{margin: 0; padding:0;}

img{

width: 100%;

height: 100%;

}

.card-content{

width: 295px;

height: 295px;

margin: 0 auto;

}

.inner {

display: block;

position: relative;

width: 100%;

height: 100%;

-webkit-transform: perspective(1000px);

-moz-transform: perspective(1000px);

-ms-transform: perspective(1000px);

-o-transform: perspective(1000px);

transform: perspective(1000px);

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

}

.front, .back{

width: 100%;

height: 100%;

position:absolute;top: 0px;left: 0px;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transition: 0.6s;

-moz-transition: 0.6s;

-o-transition: 0.6s;

-ms-transition: 0.6s;

transition: 0.6s;

cursor: pointer;

}

.front {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

transform: rotateY(0deg)

}

.back {

-webkit-transform: rotateY(-180deg);

-moz-transform: rotateY(-180deg);

-o-transform: rotateY(-180deg);

-ms-transform: rotateY(-180deg);

transform: rotateY(-180deg)

}

.card-content:hover .inner .back{

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

transform: rotateY(0deg);

}

.card-content:hover .inner .front {

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

transform: rotateY(180deg);

}

这里可以做一些描述的文案