CSS3翻牌动效

最新推荐文章于 2024-07-16 16:27:11 发布

乐夫天命兮

最新推荐文章于 2024-07-16 16:27:11 发布

阅读量477

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/wangxinxin1992816/article/details/106949717

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

效果如下

废话不多说：

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
                .data2 {
					width:100%;
					display:table;
					position:relative;
					overflow:hidden;
				}
				.data2 .pic2 {
					position:absolute;
					top:0;
					left:0;
					z-index:-1;
				}
				.data2 .image_container{
					width:100%;
					height:100%;
					display:block;
					float:left;
					perspective:600px;
				}
				.data2 .image_container .pic1 {
					transform:rotateX(0deg) rotateY(0deg);
					transform-style:preserve-3d;
					backface-visibility:hidden;
					transition:all .8s ease-in-out;
				}
				.data2 .image_container:hover .pic1 {
					transform:rotateX(-180deg);
				}
				.data2 .image_container .pic2 {
					transform:rotateX(180deg);
					transform-style:preserve-3d;
					backface-visibility:hidden;
					transition:all .8s ease-in-out;
					z-index:10;
					position:absolute;
				}
				.data2 .image_container:hover .pic2 {
					transform:rotateX(0deg) rotateY(0deg);
					z-index:10;
					position:absolute;
				}
				.data2 .row {
					width:300px;
					height:300px;
					float:left;
					margin-left:48px;
					margin-right:48px;
					margin-bottom:46px;
					position:relative;
					z-index:10;
				}
				.data2 .row .pic1 {
					width:100%;
					height:100%;
					overflow:hidden;
				}
				.data2 .row .pic2 {
					width:100%;
					height:100%;
					overflow:hidden;
				}
				.data2 .row .pic2 img {
					position:absolute;
				}
            </style>
        </head>
        <body>
            <div class="data2">
			    <div class="image_container row">
		            <div class="pic1"><img src="img/1.jpg"></div>
		            <div class="pic2"><img src="img/1.jpg"></div>
			    </div>
			</div>
        </body>
    </html>