您的当前位置:首页正文

CSS3 transform3D 图片翻转效果

2024-11-08 来源:个人技术集锦

基于上帖基本实现一个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>
Top