Skip to content

Commit 20b9746

Browse files
materialcodermaterialcoder
committed
CSS3D轮播图
1 parent b402ac2 commit 20b9746

File tree

3 files changed

+86
-91
lines changed

3 files changed

+86
-91
lines changed

‎9 CSS3实现3D轮播图/css/style.css

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
.stage {
6+
width: 1000px;
7+
margin: 0 auto;
8+
-webkit-perspective: 800px;
9+
perspective: 800px;
10+
-webkit-perspective-origin: 50% 50%;
11+
perspective-origin: 50% 50%;
12+
}
13+
.container {
14+
width: 200px;
15+
height: 200px;
16+
position: relative;
17+
margin: 0 auto;
18+
padding: 200px;
19+
-webkit-transform-style: preserve-3d;
20+
transform-style: preserve-3d;
21+
transition: transform .5s linear;
22+
}
23+
.container div {
24+
width: 200px;
25+
height: 200px;
26+
position: absolute;
27+
overflow: hidden;
28+
}
29+
.container div img {
30+
width: 200px;
31+
height: 200px;
32+
display: block;
33+
}
34+
.pic1 {
35+
transform: rotateY(0deg) translateZ(400px);
36+
}
37+
.pic2 {
38+
transform: rotateY(45deg) translateZ(400px);
39+
}
40+
.pic3 {
41+
transform: rotateY(90deg) translateZ(400px);
42+
}
43+
.pic4 {
44+
transform: rotateY(135deg) translateZ(400px);
45+
}
46+
.pic5 {
47+
transform: rotateY(180deg) translateZ(400px);
48+
}
49+
.pic6 {
50+
transform: rotateY(225deg) translateZ(400px);
51+
}
52+
.pic7 {
53+
transform: rotateY(270deg) translateZ(400px);
54+
}
55+
.pic8 {
56+
transform: rotateY(315deg) translateZ(400px);
57+
}

‎9 CSS3实现3D轮播图/index.html

+2-91
Original file line numberDiff line numberDiff line change
@@ -3,97 +3,8 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>CSS3实现3D轮播图</title>
6-
<style>
7-
* {
8-
margin: 0;
9-
padding: 0;
10-
}
11-
.stage {
12-
width: 1000px;
13-
margin: 0 auto;
14-
-webkit-perspective: 800px;
15-
perspective: 800px;
16-
-webkit-perspective-origin: 50% 50%;
17-
perspective-origin: 50% 50%;
18-
}
19-
.container {
20-
width: 200px;
21-
height: 200px;
22-
position: relative;
23-
margin: 0 auto;
24-
padding: 200px;
25-
-webkit-transform-style: preserve-3d;
26-
-moz-transform-style: preserve-3d;
27-
-ms-transform-style: preserve-3d;
28-
-o-transform-style: preserve-3d;
29-
transform-style: preserve-3d;
30-
transition: transform .5s linear;
31-
}
32-
.container div {
33-
width: 200px;
34-
height: 200px;
35-
position: absolute;
36-
overflow: hidden;
37-
}
38-
.container div img {
39-
width: 200px;
40-
height: 200px;
41-
display: block;
42-
}
43-
.pic1 {
44-
transform: rotateY(0deg) translateZ(400px);
45-
}
46-
.pic2 {
47-
transform: rotateY(45deg) translateZ(400px);
48-
}
49-
.pic3 {
50-
transform: rotateY(90deg) translateZ(400px);
51-
}
52-
.pic4 {
53-
transform: rotateY(135deg) translateZ(400px);
54-
}
55-
.pic5 {
56-
transform: rotateY(180deg) translateZ(400px);
57-
}
58-
.pic6 {
59-
transform: rotateY(225deg) translateZ(400px);
60-
}
61-
.pic7 {
62-
transform: rotateY(270deg) translateZ(400px);
63-
}
64-
.pic8 {
65-
transform: rotateY(315deg) translateZ(400px);
66-
}
67-
</style>
68-
<script>
69-
window.onload = function() {
70-
var timer = null;
71-
var container = document.getElementById('container');
72-
var deg=0;
73-
// 鼠标悬停时停止滚动
74-
container.onmouseout = function() {
75-
timer = setInterval(function(){
76-
deg +=45;
77-
container.style.transform = "rotateY(-"+ deg +"deg)";
78-
},1500);
79-
}
80-
container.onmouseout();
81-
82-
// 鼠标离开时开始滚动
83-
container.onmouseover = function() {
84-
clearInterval(timer);
85-
}
86-
87-
// 点击图片时进行切换
88-
var pics = container.getElementsByTagName('div');
89-
for(var i=0;i<pics.length;i++) {
90-
pics[i].onclick = function() {
91-
deg += 45;
92-
container.style.transform = "rotateY(-"+ deg +"deg)";
93-
}
94-
}
95-
}
96-
</script>
6+
<link rel="stylesheet" href="css/style.css">
7+
<script src="js/script.js"></script>
978
</head>
989
<body>
9910
<div class="stage">

‎9 CSS3实现3D轮播图/js/script.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
window.onload = function() {
2+
var timer = null;
3+
var container = document.getElementById('container');
4+
var deg=0;
5+
// 鼠标悬停时停止滚动
6+
container.onmouseout = function() {
7+
timer = setInterval(function(){
8+
deg +=45;
9+
container.style.transform = "rotateY(-"+ deg +"deg)";
10+
},1500);
11+
}
12+
container.onmouseout();
13+
14+
// 鼠标离开时开始滚动
15+
container.onmouseover = function() {
16+
clearInterval(timer);
17+
}
18+
19+
// 点击图片时进行切换
20+
var pics = container.getElementsByTagName('div');
21+
for(var i=0;i<pics.length;i++) {
22+
pics[i].onclick = function() {
23+
deg += 45;
24+
container.style.transform = "rotateY(-"+ deg +"deg)";
25+
}
26+
}
27+
}

0 commit comments

Comments
 (0)