div+css实现三维相机拍摄照片旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现三维相机拍摄照片旋转动画效果代码，拍摄时还有闪光效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css">
  
  
<style>
@keyframes main {
	        	0% {
		        	transform: rotateY(20deg) rotateX(-20deg) rotatez(0deg) translateY(0px);
	        	}
	        	2% {
		        	transform: rotateY(20deg) rotateX(-20deg) rotatez(0deg) translateY(0px);
	        	}
	        	7% {
		        	transform: rotateY(-70deg) rotateX(40deg) rotatez(0deg) translateY(-160px);
	        	}
	        	9% {
		        	transform: rotateY(10deg) rotateX(0deg) rotatez(0deg) translateY(-140px);
	        	}
	        	10% {
		        	transform: rotateY(-10deg) rotateX(0deg) rotatez(0deg) translateY(-140px);
	        	}
	        	12% {
		        	transform: rotateY(-10deg) rotateX(0deg) rotatez(0deg) translateY(-140px);
	        	}
	        	13% {
		        	transform: rotateY(10deg) rotateX(0deg) rotatez(0deg) translateY(-140px);
	        	}
	        	15% {
		        	transform: rotateY(220deg) rotateX(-40deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	17% {
		        	transform: rotateY(220deg) rotateX(-40deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	18% {
		        	transform: rotateY(200deg) rotateX(-40deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	20% {
		        	transform: rotateY(370deg) rotateX(-50deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	21% {
		        	transform: rotateY(350deg) rotateX(-50deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	23% {
		        	transform: rotateY(350deg) rotateX(-50deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	24% {
		        	transform: rotateY(340deg) rotateX(-50deg) rotatez(0deg) translateY(-40px) translateZ(-150px);
	        	}
	        	26% {
		        	transform: rotateY(480deg) rotateX(-60deg) rotatez(0deg) translateY(50px) translateZ(-250px) translateX(40px);
	        	}
	        	27% {
		        	transform: rotateY(475deg) rotateX(-60deg) rotatez(0deg) translateY(50px) translateZ(-250px) translateX(40px);
	        	}
	        	30% {
		        	transform: rotateY(475deg) rotateX(-60deg) rotatez(0deg) translateY(50px) translateZ(-250px) translateX(40px);
	        	}
	        	31% {
		        	transform: rotateY(465deg) rotateX(-60deg) rotatez(0deg) translateY(50px) translateZ(-250px) translateX(40px);
	        	}
	        	37% {
		        	transform: rotateY(900deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	38% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	40% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	41% {
		        	transform: rotateY(885deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	42% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	45% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	46% {
		        	transform: rotateY(885deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	47% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	50% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	51% {
		        	transform: rotateY(895deg) rotateX(15deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	52% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	60% {
		        	transform: rotateY(895deg) rotateX(10deg) rotatez(0deg) translateY(-20px) translateZ(-250px) translateX(40px);
	        	}
	        	70% {
		        	transform: rotateY(20deg) rotateX(-20deg) rotatez(0deg) translateY(0px);
	        	}
	        	
	        	
        	}
        	
        	@keyframes photos {
	        	0% {
		        	left: -390px;
	        	}
	        	33% {
		        	left: -390px;
	        	}
	        	34% {
		        	left: -260px;
	        	}
	        	40% {
		        	left: -260px;
	        	}
	        	41% {
		        	left: -130px;
	        	}
	        	45% {
		        	left: -130px;
	        	}
	        	46% {
		        	left: 0px;
	        	}
	        	50% {
		        	left: 0px;
		        	top: 0px;
	        	}
	        	51% {
	        		left: 0px;
		        	top: 90px;
	        	}
	        	60% {
	        		left: 0px;
		        	top: 90px;
	        	}
	        	70% {
		        	left: -390px;
		        	top: 0px;
	        	}
	        	
        	}
        	
        	@keyframes flash {
        		0% {
	        		opacity: 0;
        		}
        		16% {
	        		opacity: 0;
        		}
        		16.3% {
	        		opacity: 1;
        		}
        		16.5% {
	        		opacity: 0;
        		}
        		16.8% {
	        		opacity: 1;
        		}
        		17% {
	        		opacity: 0;
        		}
        		21% {
	        		opacity: 0;
        		}
        		21.3% {
	        		opacity: 1;
        		}
        		21.5% {
	        		opacity: 0;
        		}
        		21.8% {
	        		opacity: 1;
        		}
        		22% {
	        		opacity: 0;
        		}
        		27% {
	        		opacity: 0;
        		}
        		27.3% {
	        		opacity: 1;
        		}
        		27.5% {
	        		opacity: 0;
        		}
        		27.8% {
	        		opacity: 1;
        		}
        		28% {
	        		opacity: 0;
        		}
        		
        	}
 
        	.flash-overlay {
	        	position: fixed;
	        	width: 100%;
	        	height: 100%;
	        	z-index: 100000;
	        	background: #fff;
	        	left: 0;
	        	top: 0;
	        	opacity: 0;
	        	animation: flash infinite 30s ease;
        	}
        	
         	body {
	        	background: #333;
        	}
        	
        	.papers {
	        	width: 120px;
	        	height: 170px;
	        	position: absolute;
	        	left: 50%;
	        	top: 50%;
	        	perspective: 500px;
	        	transform-style: preserve-3d;
	        	margin: -100px 0 0 -100px;
        	}
        	.paper {
	        	width: 200px;
	        	height: 240px;
	        	transform-style: preserve-3d;
	        	transform: rotateX(70deg) rotateZ(40deg) translateZ(-100px);
	        	position: absolute;
	        	left: 0;
	        	top: 0;
	        	box-shadow: 2px 1px 2px rgba(0,0,0,0.2);
	        	background: url(//repo.bfw.wiki/bfwrepo/images/photo/1.jpg) no-repeat center center #fdfdfd;
	        	z-index: 3;
	        	background-size: 180px 220px;
        	}
        	.paper.two {
	        	transform: rotateX(70deg) rotateZ(45deg) translateZ(-103px);
	        	z.........完整代码请登录后点击上方下载按钮下载查看