div+css实现三维相机拍摄照片旋转动画效果代码
代码语言：html
所属分类：三维
代码描述：div+css实现三维相机拍摄照片旋转动画效果代码，拍摄时还有闪光效果。
代码标签： 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-index: 2;
}
.paper.three {
transform: rotateX(70deg) rotateZ(70deg) translateX(40px) translateZ(-106px);
z-index: 1;
background: url(//repo.bfw.wiki/bfwrepo/images/photo/2.jpg) no-repeat center center #fdfdfd;
}
.scene {
z-index: 100000;
width: 200px;
height: 130px;
position: absolute;
left: 50%;
top: 50%;
margin: -100px 0 0 -65px;
perspective: 500px;
transform-style: preserve-3d;
}
.camera {
width: 200px;
height: 130px;
position: absolute;
left: 0;
top: 40px;
transform-style: preserve-3d;
transform: rotateY(20deg) rotateX(-20deg) rotatez(0deg);
animation: main infinite 30s ease;
transform-origin: 50% 50%;
}
.camera .body {
width: 200px;
height: 130px;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
}
.body .face {
position: absolute;
left: 0px;
top: 0px;
transform-style: preserve-3d;
transform-origin: 50% 50% 20px;
}
.back.face {
width: 200px;
height: 130px;
background: #ddd;
border-radius: 12px;
transform: translateZ(-20px);
}
.front.face {
width: 200px;
height: 130px;
background: #ddd;
border-radius: 12px;
transform: translateZ(20px);
}
.left.face {
width: 40px;
height: 110px;
background: #bbb;
border-radius: 0;
transform: translateZ(-10px) translateY(10px) rotateY(90deg) scaleX(1.5);
}
.right.face {
width: 40px;
height: 110px;
background: #bbb;
border-radius: 0;
transform: translateZ(-20px) translateY(10px) translateX(200px) rotateY(90deg);
}
.top.face {
width: 178px;
height: 40px;
background: #eee;
border-radius: 0;
transform: translateZ(-20px) translateX(10px) rotateX(-90deg);
}
.bottom.face {
width: 178px;
height: 40px;
background: #eee;
border-radius: 0;
transform: translateZ(-20px) translateX(10px) translateY(130px) rotateX(-90deg);
}
.radiuses .left-top {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transform: translateZ(10px) translateY(-10px) translateX(-18px) rotateY(90deg) rotateX(90deg) scaleX(1.5);
}
.radiuses .left-top>div {
width: 40px;
height: 5px;
}
.radiuses .right-top {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transform: translateZ(0px) translateY(-10px) translateX(177px) rotateZ(0deg) rotateY(270deg) rotateX(90deg);
}
.radiuses .right-top>div {
width: 40px;
height: 5px;
}
.radiuses .left-bottom {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transform: translateZ(10px) translateY(120px) translateX(-18px) rotateZ(0deg) rotateY(270deg) rotateX(270deg) scaleX(1.5);
}
.radiuses .left-bottom>div {
width: 40px;
height: 5px;
}
.radiuses .right-bottom {
position: absolute;
top: 0;
left: 0;
transform-style: preserve-3d;
transform: translateZ(0px) translateY(120px) translateX(177px) rotateZ(0deg) rotateY(90deg) rotateX(270deg);
}
.radiuses .right-bottom>div {
width: 40px;
height: 5px;
}
.radiuses .one {
background: #e3e3e3;
transform: rotateX(18deg);
}
.radiuses .two {
background: #D9d9d9;
transform: rotateX(36deg) translateZ(-2px) translateY(-1px);
}
.radiuses .three {
background: #cfcfcf;
transform: rotateX(54deg) translateZ(-5px) translateY(-2px);
}
.radiuses .four {
background: #c5c5c5;
transform: rotateX(72deg) translateZ(-8px) translateY(-6px);
}
.objective {
width: 90px;
height: 90px;
background: #aaa;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -45px 0 0 -10px;
transform-style: preserve-3d;
transform: translateZ(4px);
}
.objective:before {
content: "";
background: #aaa;
border-radius: 100%;
position: absolute;
left: 0;
top: 0;
width: 90px;
height: 90px;
transform: translateZ(-3px);
}
.objective:after {
content: "";
box-sizing: border-box;
border: 10px solid #ccc;
border-radius: 100%;
position: absolute;
left: 0;
top: 0;
width: 90px;
height: 90px;
transform: translateZ(5px);
}
.objective.small:before {
background: #aaa;
transform: translateZ(-3px);
}
.objective.small {
transform: translateZ(13px) scale(0.87);
}
.objective.small:after {
transform: translateZ(4px)
}
.objective.small .depth {
height: 8px;
width: 10px;
margin: -10px 0 0 -4px;
background: #aaa;
top: 50px;
left: 45px;
}
.objective.small .lens {
width: 70px;
height: 70px;
position: absolute;
left: 10px;
top: 10px;
background: #222;
border-radius: 100%;
transform: translateZ(3px);
transform-style: preserve-3d;
}
.objective.small .lens-inner {
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
left: 10px;
top: 10px;
background: #111;
transform: translateZ(2px);
box-shadow: inset 0 -1px 10px rgba(108,0,144,1);
background-image: linear-gradient(0deg, rgba(255,255,255,0.23) 10%,rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(63,74,226,0.63) 0%,rgba(0,0,0,0) 100%),radial-gradient(ellipse at 40px 40px, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%);
}
.objective.small .lens-inner .one {
width: 20px;
height: 20px;
background-image: linear-gradient(180deg, rgba(255,255,255,0.1) 0%,rgba(0,0,0,0) 100%);
border-radius: 100%;
position: absolute;
left: 15px;
top: 15px;
}
.objective.small .lens-inner .two {
width: 10px;
height: 10px;
background: rgba(255,255,255,0.07);
border-radius: 100%;
position: absolute;
left: 10px;
top: 10px;
}
.objective.small .lens-inner .three {
width: 8px;
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 100%;
position: absolute;
left: 15px;
top: 15px;
}
.objective .depth {
position: absolute;
top: 50%;
left: 50%;
background: #aaa;
width: 9px;
height: 8px;
margin: -3px 0 0 -4px;
}
/* Objective sides */
.objective .depth.one {
transform: rotateY(90deg) rotateX(0deg) translateZ(-45px);
}
.objective .depth.two {
transform: rotateY(90deg) rotateX(10deg) translateZ(-45px);
}
.objective .depth.three {
transform: rotateY(90deg) rotateX(20deg) translateZ(-45px);
}
.objective .depth.four {
transform: rotateY(90deg) rotateX(30deg) translateZ(-45px);
}
.objective .depth.five {
transform: rotateY(90deg) rotateX(40deg) translateZ(-45px);
}
.objective .depth.six {
transform: rotateY(90deg) rotateX(50deg) translateZ(-45px);
}
.objective .depth.seven {
transform: rotateY(90deg) rotateX(60deg) translateZ(-45px);
}
.objective .depth.eight {
transform: rotateY(90deg) rotateX(70deg) translateZ(-45px);
}
.objective .depth.nine {
transform: rotateY(90deg) rotateX(80deg) translateZ(-45px);
}
.objective .depth.ten {
transform: rotateY(90deg) rotateX(90deg) translateZ(-45px);
}
.objective .depth.eleven {
transform: rotateY(90deg) rotateX(100deg) translateZ(-45px);
}
.objective .depth.twelve {
transform: rotateY(90deg) rotateX(110deg) translateZ(-45px);
}
.objective .depth.thirteen {
transform: rotateY(90deg) rotateX(120deg) translateZ(-45px);
}
.objective .depth.fourteen {
transform: rotateY(90deg) rotateX(130deg) translateZ(-45px);
}
.objective .depth.fifteen {
transform: rotateY(90deg) rotateX(140deg) translateZ(-45px);
}
.objective .depth.sixteen {
transform: rotateY(90deg) rotateX(150deg) translateZ(-45px);
}
.objective .depth.seventeen {
transform: rotateY(90deg) rotateX(160deg) translateZ(-45px);
}
.objective .depth.eighteen {
transform: rotateY(90deg) rotateX(170deg) translateZ(-45px);
}
.objective .depth.nineteen {
transform: rotateY(90deg) rotateX(180deg) translateZ(-45px);
}
.objective .depth.twenty {
transform: rotateY(90deg) rotateX(190deg) translateZ(-45px);
}
.objective .depth.twentyone {
transform: rotateY(90deg) rotateX(200deg) translateZ(-45px);
}
.objective .depth.twentytwo {
transform: rotateY(90deg) rotateX(210deg) translateZ(-45px);
}
.objective .depth.twentythree {
transform: rotateY(90deg) rotateX(220deg) translateZ(-45px);
}
.objective .depth.twentyfour {
transform: rotateY(90deg) rotateX(230deg) translateZ(-45px);
}
.objective .depth.twentyfive {
transform: rotateY(90deg) rotateX(240deg) translateZ(-45px);
}
.objective .depth.twentysix {
transform: rotateY(90deg) rotateX(250deg) translateZ(-45px);
}
.objective .depth.twentyseven {
transform: rotateY(90deg) rotateX(260deg) translateZ(-45px);
}
.objective .depth.twentyeight {
transform: rotateY(90deg) rotateX(270deg) translateZ(-45px);
}
.objective .depth.twentynine {
transform: rotateY(90deg) rotateX(280deg) translateZ(-45px);
}
.objective .depth.thirty {
transform: rotateY(90deg) rotateX(290deg) translateZ(-45px);
}
.objective .depth.thirtyone {
transform: rotateY(90deg) rotateX(300deg) translateZ(-45px);
}
.objective .depth.thirtytwo {
transform: rotateY(90deg) rotateX(310deg) translateZ(-45px);
}
.objective .depth.thirtythree {
transform: rotateY(90deg) rotateX(320deg) translateZ(-45px);
}
.objective .depth.thirtyfour {
transform: rotateY(90deg) rotateX(330deg) translateZ(-45px);
}
.objective .depth.thirtyfive {
transform: rotateY(90deg) rotateX(340deg) translateZ(-45px);
}
.objective .depth.thirtysix {
transform: rotateY(90deg) rotateX(350deg) translateZ(-45px);
}
.flash {
position: absolute;
left: 100px;
top: 0;
transform-style: preserve-3d;
}
.flash .left {
width: 35px;
height: 40px;
background: #ccc;
position: absolute;
left: 0;
top: 0;
transform: rotateY(90deg);
transform-origin: left center;
border-radius: 0 0 35px 0;
}
.flash .right {
width: 35px;
height: 40px;
background: #ccc;
position: absolute;
left: 50px;
top: 0;
transform: rotateY(90deg);
transform-origin: left center;
border-radius: 0 0 35px 0;
}
.flash .radius {
width: 50px;
height:40px;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
}
.flash .radius>div {
width: 50px;
height: 7px;
background: #bbb;
position: absolute;
top: 0;
left: 0;
}
.flash .radius .one {
transform: rotateX(90deg) translateZ(-35px) translateY(-2.5px);
background: #dedede;
}
.flash .radius .two {
transform: rotateX(80deg) translateZ(-35px) translateY(-2.5px);
background: #e0e0e0;
}
.flash .radius .three {
transform: rotateX(70deg) translateZ(-35px) translateY(-2.5px);
background: #e2e2e2;
}
.flash .radius .four {
transform: rotateX(60deg) translateZ(-35px) translateY(-2.5px);
background: #e3e3e3;
}
.flash .radius .five {
transform: rotateX(50deg) translateZ(-35px) translateY(-2.5px);
background: #e5e5e5;
}
.flash .radius .six {
transform: rotateX(40deg) translateZ(-35px) translateY(-2.5px);
background: #e7e7e7;
}
.flash .radius .seven {
transform: rotateX(30deg) translateZ(-35px) translateY(-2.5px);
background: #e8e8e8;
}
.flash .radius .eight {
transform: rotateX(20deg) translateZ(-35px) translateY(-2.5px);
background: #eaeaea;
}
.flash .radius .nine {
transform: rotateX(10deg) translateZ(-35px) translateY(-2.5px);
background: #ececec;
}
.flash .radius .ten {
transform: rotateX(0deg) translateZ(-35px) translateY(-2.5px);
background: #eee;
}
.flash .light {
width: 50px;
height: 35px;
background: #fff;
box-sizing: border-box;
border: 5px solid #ddd;
transform-origin: top center;
transform: rotateX(-90deg);
background-image: radial-gradient(ellipse at center 20px, rgba(200,200,200,0.7) 0%,rgba(255,255,255,0) 100%), linear-gradient(to bottom, rgba(255,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0