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

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

代码语言：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: rot.........完整代码请登录后点击上方下载按钮下载查看