Html
    Css
    Js

    
                        
.wrapDiv {
	width:400px;
	height:auto;
	position:relative;
}
.pic {
	width:400px;
	height:280px;
	transition:.3s;
}
.pic img {
	width:400px;
	height:280px;
	transition:.3s;
	border-radius:10px;
}
.cont {
	opacity:0;
	width:400px;
	height:280px;
	position:absolute;
	top:0;
	line-height:32px;
	border-radius:10px;
	font-size:22px;
	background-color:#EEEEEE;
	color:#5A5A5A;
	transform:rotateY(-180deg);
	transition:.3s;
}
.wrapDiv:hover .pic {
	transform:rotateY(180deg);
	opacity:0;
	transition:.3s;
}
.wrapDiv:hover .cont {
	opacity:1;
	transform:rotateY(0);
	transition:.3s;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯CSS卡片翻转的效果(原创)

更新时间:2020-06-10 00:39:30

纯css利用伪类:hover 和transform实现的翻转效果

0