Skip to content

Commit ac18d54

Browse files
coderpwh1024coderpwh1024
committed
update jq 3d
1 parent f0aa5ee commit ac18d54

File tree

4 files changed

+233
-21
lines changed

4 files changed

+233
-21
lines changed

‎jquery/.idea/workspace.xml

Lines changed: 63 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery/3D旋转图/index.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>3D酷炫图</title>
8+
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
9+
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
10+
<link rel="stylesheet" href="css/style.css">
11+
</head>
12+
<body>
13+
<div id="wrap">
14+
<section class="cube-container">
15+
<div id="cube">
16+
<figure class="front">
17+
<div class="col-md-8 col col-sm-12" style="background-image: url('img/1.jpg');"></div>
18+
<div class="col-md-4" style="height: inherit;display: inline-block;">
19+
<article>
20+
<img src="img/profile.svg" alt="logo" class="md-4">
21+
<header class="htmleaf-header">
22+
<h1>jquery 3d旋转轮播图效果 <span>Simple 3D Rotating Slider With jQuery</span></h1>
23+
<div class="htmleaf-links">
24+
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline"
25+
href="http://www.htmleaf.com/" title="jQuery之家" target="_blank">
26+
<span> jQuery之家</span></a>
27+
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline"
28+
href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201712024859.html"
29+
title="返回下载页" target="_blank"><span> 返回下载页</span></a>
30+
</div>
31+
</header>
32+
</article>
33+
</div>
34+
</figure>
35+
<figure class="back">
36+
<div class="col-md-8" style="background-image: url('img/2.jpg');">
37+
</div>
38+
<div class="col-md-4" style="height: inherit;display: inline-block;">
39+
<article>
40+
<img src="img/profile.svg" alt="logo" class="mb-4">
41+
<p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
42+
</article>
43+
</div>
44+
</figure>
45+
<figure class="right">
46+
<div class="col-md-8" style="background-image:url('img/3.jpg');"></div>
47+
<div class="col-md-4" style="height: inherit;display: inline-block;">
48+
<article>
49+
<img src="img/profile.svg" alt="logo" class="mb-4">
50+
<p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
51+
</article>
52+
</div>
53+
</figure>
54+
<figure class="left">
55+
<div class="col-md-8" style="background-image:url('img/4.jpg');"></div>
56+
<div class="col-md-4" style="height:inherit;display:inline-block;">
57+
<article>
58+
<img src="img/profile.svg" alt="logo" class="mb-4">
59+
<p class="text-center">A bootstrap compatible slider that rotates gracefully in three dimensions</p>
60+
</article>
61+
</div>
62+
</figure>
63+
<figure class="top">5</figure>
64+
<figure class="bottom">6</figure>
65+
66+
67+
</div>
68+
</section>
69+
70+
</div>
71+
<div class="button-wrap">
72+
<button class="previous">Previous</button>
73+
<button class="next">Next</button>
74+
</div>
75+
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
76+
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
77+
<script type="text/javascript">
78+
var counter = 0;
79+
$('.next').on('click',function () {
80+
counter -= 90;
81+
var rotation = 'translateZ(-50vw) rotateY('+counter+'deg)';
82+
$('#cube').css('transform',rotation);
83+
});
84+
$(".previous").on('click',function () {
85+
counter+=90;
86+
var rotation = 'translateZ(-50vm) rotateY('+counter+')';
87+
$('#cube').css('transform',rotation);
88+
})
89+
</script>
90+
</body>
91+
</html>

‎jquery/3D旋转图/js/jquery-1.11.0.min.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎jquery/3D旋转图/scss/style.scss

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.cube-container {
2+
width: 100vw;
3+
height: 100vh;
4+
position: relative;
5+
perspective: 2000px;
6+
background:#222;
7+
}
8+
9+
#cube {
10+
width: 100vw;
11+
height: 100vh;
12+
position: absolute;
13+
transform-style: preserve-3d;
14+
}
15+
16+
#cube figure {
17+
margin: 0;
18+
width: 100vw;
19+
height: 100vh;
20+
display: flex;
21+
position: absolute;
22+
background:#222;
23+
color:white;
24+
div{
25+
height:inherit;
26+
background-size:cover;
27+
background-position:center;
28+
}
29+
}
30+
31+
#cube .front { transform: rotateY( 0deg ) translateZ( 50vw ); }
32+
#cube .back { transform: rotateY( 180deg ) translateZ( 50vw ); background: gold;}
33+
#cube .right { transform: rotateY( 90deg ) translateZ( 50vw ); background: dodgerblue;}
34+
#cube .left { transform: rotateY( -90deg ) translateZ( 50vw ); background: cadetblue; }
35+
#cube .top { transform: rotateX( 90deg ) translateZ( 50vw ); background: mintgreen; }
36+
#cube .bottom { transform: rotateX( -90deg ) translateZ( 50vw ); background: lavender; }
37+
38+
#cube { transform: translateZ( -50vw ); }
39+
40+
#cube { transition: transform 1.5s ease-in-out;}
41+
42+
.button-wrap{
43+
position:absolute;
44+
bottom:10px;
45+
right:12.5%;
46+
transform:translateX(12.5%);
47+
}
48+
49+
article{
50+
img{
51+
max-height:150px;
52+
}
53+
position:absolute;
54+
top:50%;
55+
transform:translateY(-50%);
56+
}
57+
58+
.button-wrap button {
59+
background: white;
60+
border: 0px;
61+
border-bottom: 3px solid #222;
62+
box-shadow: grey 0px 2px 2px 0px;
63+
cursor:pointer;
64+
}
65+
66+
.button-wrap:hover{
67+
button:not(:hover){
68+
background:rgba(255,255,255,0.6);
69+
}
70+
}
71+
72+
.button-wrap button:focus{
73+
box-shadow: dodgerblue 0px 2px 2px 0px;
74+
outline:none;
75+
}

0 commit comments

Comments
 (0)