CSS3 transform3D 图片翻转效果

最新推荐文章于 2024-07-26 09:56:47 发布

乐夫天命兮

最新推荐文章于 2024-07-26 09:56:47 发布

阅读量5.5k

点赞数 2

分类专栏： CSS

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

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

基本思路来自于CSS3 transform3D 图片翻转效果一贴

基于上帖基本实现一个3D 图片翻转效果demo，为了再加一个延时便成为下图效果：
在这里插入图片描述
代码如下：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Study</title>
    <style>
        body,figure {
		    margin: 0;
		    padding: 0;
		}
		.stage {
		    width: 200px;
		    height: 100px;
		    margin: 40px;
		    perspective: 1000px;
		}
		.flipBox {
			margin-top: 8px;
		    width: 200px;
		    height: 100px;
		    position: relative;
		    transform-style: preserve-3d;
		    transition: transform 1s;
		}
		.pic {
		    width: 200px;
		    height: 100px;
		    font-size: 24px;
		    color: #fff;
		    line-height: 100px;
		    text-align: center;
		    position: absolute;
		    top: 0;
		    left: 0;
		    backface-visibility: hidden;
		}
		.front {
		    background: #f00;
		}
		.back {
		    background: #090;
		    transform: rotateX(180deg);
		}
		.anmial {
		 	transform: rotateX(-180deg);
		 	/*transition: transform 0.5s EaseIn;*/
		}
    </style>
</head>
<body>
	<div class="stage">
	    <div class="flipBox">
	        <figure class="pic front">1</figure>
	        <figure class="pic back">2</figure>
	    </div>
	    <div class="flipBox">
	        <figure class="pic front">2</figure>
	        <figure class="pic back">3</figure>
	    </div>
	    <div class="flipBox">
	        <figure class="pic front">3</figure>
	        <figure class="pic back">4</figure>
	    </div>
	    <div class="flipBox">
	        <figure class="pic front">4</figure>
	        <figure class="pic back">5</figure>
	    </div>
	    <div class="flipBox">
	        <figure class="pic front">5</figure>
	        <figure class="pic back">6</figure>
	    </div>
	</div>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
	$(function(){
		$.each($('.flipBox'), function(i,n) {
			setTimeout(function(){
				$('.flipBox').eq(i).addClass('anmial');
			},i*500)
		});
	})
	
</script>