Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
361 lines (320 sloc) 8.45 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D照片墙</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
/* 正方向0-40度 */
@keyframes rotateY1 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(40deg);
}
}
/* 正方向40-80度 */
@keyframes rotateY2 {
from {
transform: rotateY(40deg);
}
to {
transform: rotateY(80deg);
}
}
/* 正方向80-120度 */
@keyframes rotateY3 {
from {
transform: rotateY(80deg);
}
to {
transform: rotateY(120deg);
}
}
/* 正方向120-160度 */
@keyframes rotateY4 {
from {
transform: rotateY(120deg);
}
to {
transform: rotateY(160deg);
}
}
/* 正方向160-200度 */
@keyframes rotateY5 {
from {
transform: rotateY(160deg);
}
to {
transform: rotateY(200deg);
}
}
/* 正方向200-240度 */
@keyframes rotateY6 {
from {
transform: rotateY(200deg);
}
to {
transform: rotateY(240deg);
}
}
/* 正方向240-280度 */
@keyframes rotateY7 {
from {
transform: rotateY(240deg);
}
to {
transform: rotateY(280deg);
}
}
/* 正方向280-320度 */
@keyframes rotateY8 {
from {
transform: rotateY(280deg);
}
to {
transform: rotateY(320deg);
}
}
/* 正方向320-360度 */
@keyframes rotateY9 {
from {
transform: rotateY(320deg);
}
to {
transform: rotateY(360deg);
}
}
/* 负方向0-40度 */
@keyframes rotate-Y1 {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-40deg);
}
}
/* 负方向40-80度 */
@keyframes rotate-Y2 {
from {
transform: rotateY(-40deg);
}
to {
transform: rotateY(-80deg);
}
}
/* 负方向80-120度 */
@keyframes rotate-Y3 {
from {
transform: rotateY(-80deg);
}
to {
transform: rotateY(-120deg);
}
}
/* 负方向120-160度 */
@keyframes rotate-Y4 {
from {
transform: rotateY(-120deg);
}
to {
transform: rotateY(-160deg);
}
}
/* 负方向160-200度 */
@keyframes rotate-Y5 {
from {
transform: rotateY(-160deg);
}
to {
transform: rotateY(-200deg);
}
}
/* 负方向200-240度 */
@keyframes rotate-Y6 {
from {
transform: rotateY(-200deg);
}
to {
transform: rotateY(-240deg);
}
}
/* 负方向240-280度 */
@keyframes rotate-Y7 {
from {
transform: rotateY(-240deg);
}
to {
transform: rotateY(-280deg);
}
}
/* 负方向280-320度 */
@keyframes rotate-Y8 {
from {
transform: rotateY(-280deg);
}
to {
transform: rotateY(-320deg);
}
}
/* 负方向320-360度 */
@keyframes rotate-Y9 {
from {
transform: rotateY(-320deg);
}
to {
transform: rotateY(-360deg);
}
}
body {
background: #f9f9f9;
}
.my-container {
width: 800px;
height: 500px;
margin: 20px auto;
/*border: 1px solid red;*/
}
.photo-wrap {
perspective: 800px;
width: 800px;
}
.container {
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}
.img {
width: 200px;
height: 118px;
line-height: 118px;
text-align: center;
position: absolute;
top: 160px;
left: 300px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
background: pink;
}
.img01 {
transform: rotateY(0deg) translateZ(300px);
}
.img02 {
transform: rotateY(40deg) translateZ(300px);
}
.img03 {
transform: rotateY(80deg) translateZ(300px);
}
.img04 {
transform: rotateY(120deg) translateZ(300px);
}
.img05 {
transform: rotateY(160deg) translateZ(300px);
}
.img06 {
transform: rotateY(200deg) translateZ(300px);
}
.img07 {
transform: rotateY(240deg) translateZ(300px);
}
.img08 {
transform: rotateY(280deg) translateZ(300px);
}
.img09 {
transform: rotateY(320deg) translateZ(300px);
}
.prev {
width: 30px;
height: 70px;
color: #6d8099;
float: left;
font-size: 22px;
background: #ddd;
line-height: 70px;
text-align: center;
position: relative;
bottom: -175px;
border-radius: 5px;
z-index: 100;
}
.next {
width: 30px;
height: 70px;
color: #6d8099;
float: right;
font-size: 22px;
background: #ddd;
line-height: 70px;
text-align: center;
position: relative;
bottom: -175px;
border-radius: 5px;
z-index: 100;
}
</style>
</head>
<body class="body">
<div class="my-container">
<!-- <div class="prev"><</div> -->
<div class="photo-wrap"> <!-- 舞台 -->
<div class="container"> <!-- 容器 -->
<div class="img img01">1</div>
<div class="img img02">2</div>
<div class="img img03">3</div>
<div class="img img04">4</div>
<div class="img img05">5</div>
<div class="img img06">6</div>
<div class="img img07">7</div>
<div class="img img08">8</div>
<div class="img img09">9</div>
</div>
</div>
<!-- <div class="next">></div> -->
</div>
<script>
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone","iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
var now = 1;
var changeImg = function(flag) {
var str = flag == 'next' ? '-' : '';
var className = 'rotate' + str + 'Y' + now;
$('.container').removeAttr('style').css('animation', className + ' 1s ease-in-out forwards');
now = (now+1) > 9 ? 1 : (now+1);
}
var timer = setInterval(function() {
changeImg('next');
}, 3000);
if(IsPC()) { //电脑访问
$('.prev').click(function() {
clearInterval(timer);
changeImg('prev');
});
$('.next').click(function() {
clearInterval(timer);
changeImg('next');
});
} else {
$('.prev').tap(function() {
clearInterval(timer);
changeImg('prev');
});
$('.next').tap(function() {
clearInterval(timer);
changeImg('next');
});
}
</script>
</body>
</html>