├── README.md
├── css
├── 3dview2.css
├── reset.css
└── style.css
├── html
├── 3dView2.html
└── index.html
├── images
├── 2.gif
├── 3dview.gif
├── boom.gif
├── rotate.gif
└── view.jpg
└── js
├── TweenMax.min.js
├── imgLazyLoad.js
└── index.js
/README.md:
--------------------------------------------------------------------------------
1 | # css33DView
2 | CSS3 3D VIEW ，使用 CSS3 实现的 3D 视角。
3 |
4 | [Demo(移动端效果，请使用模拟器)](http://sbco.cc/demo/3dview/html/index.html)
5 |
6 | [简易Demo示例1](http://sbco.cc/demo/3dview/html/3dView2.html)
7 |
8 | [简易Demo示例2](http://codepen.io/Chokcoco/pen/mAyRGv?editors=1100)
9 |
10 | [简易Demo示例3](https://codepen.io/Chokcoco/pen/WGbERo)
11 |
12 | ## 博客园相关博文
13 | [【CSS进阶】试试酷炫的 3D 视角](http://www.cnblogs.com/coco1s/p/5847080.html)
14 |
15 | ## License
16 | MIT
17 |
--------------------------------------------------------------------------------
/css/3dview2.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #efefef;
3 | font-family: "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial;
4 | min-width: 1280px;
5 | }
6 |
7 | .container {
8 | width: 640px;
9 | margin: 0 auto;
10 | position: relative;
11 | }
12 |
13 | .container .stage {
14 | width: 100%;
15 | height: 2000px;
16 | position: relative;
17 | -webkit-perspective: 742px;
18 | -moz-perspective: 742px;
19 | perspective: 742px;
20 | -webkit-transform-style: preserve-3d;
21 | transform-style: preserve-3d;
22 | }
23 |
24 | .container .stage .control {
25 | transform: translateZ(-3000px) rotateY(50deg) rotateZ(0deg);
26 | transform-style: preserve-3d;
27 | animation: photoRotate 10s linear infinite;
28 | }
29 |
30 | .container .stage .imgWrap {
31 | position: absolute;
32 | width: 174px;
33 | height: 2000px;
34 | left: 50%;
35 | -webkit-transition: -webkit-transform 1s;
36 | transition: transform 1s;
37 | -webkit-transform-style: preserve-3d;
38 | transform-style: preserve-3d;
39 | }
40 |
41 | .container .stage .imgWrap > div {
42 | width: 174px;
43 | height: 2000px;
44 | overflow: hidden;
45 | position: absolute;
46 | top: 0;
47 | left: 0;
48 | -webkit-transform-origin: 50% 50% 0px;
49 | transform-origin: 50% 50% 0px;
50 | -webkit-transform-style: preserve-3d;
51 | transform-style: preserve-3d;
52 | background-image: url(../images/view.jpg);
53 | background-repeat: no-repeat;
54 | }
55 |
56 | .container .stage .img-bg1 {
57 | background-position: 0px 0;
58 | -webkit-transform: rotateY(18deg) translateZ(543px);
59 | transform: rotateY(18deg) translateZ(543px);
60 | }
61 |
62 | .container .stage .img-bg2 {
63 | background-position: -174px 0;
64 | -webkit-transform: rotateY(36deg) translateZ(543px);
65 | transform: rotateY(36deg) translateZ(543px);
66 | }
67 |
68 | .container .stage .img-bg3 {
69 | background-position: -348px 0;
70 | -webkit-transform: rotateY(54deg) translateZ(543px);
71 | transform: rotateY(54deg) translateZ(543px);
72 | }
73 |
74 | .container .stage .img-bg4 {
75 | background-position: -522px 0;
76 | -webkit-transform: rotateY(72deg) translateZ(543px);
77 | transform: rotateY(72deg) translateZ(543px);
78 | }
79 |
80 | .container .stage .img-bg5 {
81 | background-position: -696px 0;
82 | -webkit-transform: rotateY(90deg) translateZ(543px);
83 | transform: rotateY(90deg) translateZ(543px);
84 | }
85 |
86 | .container .stage .img-bg6 {
87 | background-position: -870px 0;
88 | -webkit-transform: rotateY(108deg) translateZ(543px);
89 | transform: rotateY(108deg) translateZ(543px);
90 | }
91 |
92 | .container .stage .img-bg7 {
93 | background-position: -1044px 0;
94 | -webkit-transform: rotateY(126deg) translateZ(543px);
95 | transform: rotateY(126deg) translateZ(543px);
96 | }
97 |
98 | .container .stage .img-bg8 {
99 | background-position: -1218px 0;
100 | -webkit-transform: rotateY(144deg) translateZ(543px);
101 | transform: rotateY(144deg) translateZ(543px);
102 | }
103 |
104 | .container .stage .img-bg9 {
105 | background-position: -1392px 0;
106 | -webkit-transform: rotateY(162deg) translateZ(543px);
107 | transform: rotateY(162deg) translateZ(543px);
108 | }
109 |
110 | .container .stage .img-bg10 {
111 | background-position: -1566px 0;
112 | -webkit-transform: rotateY(180deg) translateZ(543px);
113 | transform: rotateY(180deg) translateZ(543px);
114 | }
115 |
116 | .container .stage .img-bg11 {
117 | background-position: -1740px 0;
118 | -webkit-transform: rotateY(198deg) translateZ(543px);
119 | transform: rotateY(198deg) translateZ(543px);
120 | }
121 |
122 | .container .stage .img-bg12 {
123 | background-position: -1914px 0;
124 | -webkit-transform: rotateY(216deg) translateZ(543px);
125 | transform: rotateY(216deg) translateZ(543px);
126 | }
127 |
128 | .container .stage .img-bg13 {
129 | background-position: -2088px 0;
130 | -webkit-transform: rotateY(234deg) translateZ(543px);
131 | transform: rotateY(234deg) translateZ(543px);
132 | }
133 |
134 | .container .stage .img-bg14 {
135 | background-position: -2262px 0;
136 | -webkit-transform: rotateY(252deg) translateZ(543px);
137 | transform: rotateY(252deg) translateZ(543px);
138 | }
139 |
140 | .container .stage .img-bg15 {
141 | background-position: -2436px 0;
142 | -webkit-transform: rotateY(270deg) translateZ(543px);
143 | transform: rotateY(270deg) translateZ(543px);
144 | }
145 |
146 | .container .stage .img-bg16 {
147 | background-position: -2610px 0;
148 | -webkit-transform: rotateY(288deg) translateZ(543px);
149 | transform: rotateY(288deg) translateZ(543px);
150 | }
151 |
152 | .container .stage .img-bg17 {
153 | background-position: -2784px 0;
154 | -webkit-transform: rotateY(306deg) translateZ(543px);
155 | transform: rotateY(306deg) translateZ(543px);
156 | }
157 |
158 | .container .stage .img-bg18 {
159 | background-position: -2958px 0;
160 | -webkit-transform: rotateY(324deg) translateZ(543px);
161 | transform: rotateY(324deg) translateZ(543px);
162 | }
163 |
164 | .container .stage .img-bg19 {
165 | background-position: -3132px 0;
166 | -webkit-transform: rotateY(342deg) translateZ(543px);
167 | transform: rotateY(342deg) translateZ(543px);
168 | }
169 |
170 | .container .stage .img-bg20 {
171 | background-position: -3306px 0;
172 | -webkit-transform: rotateY(360deg) translateZ(543px);
173 | transform: rotateY(360deg) translateZ(543px);
174 | }
175 |
176 | @keyframes photoRotate {
177 | 0% {
178 | -webkit-transform: translateZ(-3000px) rotateY(0deg) rotateZ(0deg);
179 | transform: translateZ(-3000px) rotateY(0deg) rotateZ(0deg);
180 | }
181 | 100% {
182 | -webkit-transform: translateZ(-3000px) rotateY(360deg) rotateZ(0deg);
183 | transform: translateZ(-3000px) rotateY(360deg) rotateZ(0deg);
184 | }
185 | }
186 |
--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
1 | /*CSS reset*/
2 | html {
3 | overflow-x: hidden;
4 | overflow-y: auto;
5 | color: #333;
6 | font-size: 62.5%;
7 | font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif, "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1";
8 | }
9 |
10 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
11 | margin: 0;
12 | padding: 0;
13 | }
14 |
15 | fieldset, img {
16 | border: 0;
17 | }
18 |
19 | address, caption, cite, code, dfn, em, th, var, optgroup {
20 | font-style: normal;
21 | font-weight: 400;
22 | }
23 |
24 | del, ins {
25 | text-decoration: none;
26 | }
27 |
28 | li {
29 | list-style: none;
30 | }
31 |
32 | caption, th {
33 | text-align: left;
34 | }
35 |
36 | q:before, q:after {
37 | content: '';
38 | }
39 |
40 | abbr, acronym {
41 | border: 0;
42 | font-variant: normal;
43 | }
44 |
45 | sup {
46 | vertical-align: baseline;
47 | }
48 |
49 | sub {
50 | vertical-align: baseline;
51 | }
52 |
53 | legend {
54 | color: #000;
55 | }
56 |
57 | input, button, textarea, select, optgroup, option {
58 | font-family: inherit;
59 | font-size: inherit;
60 | font-style: inherit;
61 | font-weight: inherit;
62 | }
63 |
64 | input, button, textarea, select {
65 | outline: none;
66 | *font-size: 100%;
67 | }
68 |
69 | textarea {
70 | resize: none;
71 | }
72 |
73 | a {
74 | outline: 0;
75 | text-decoration: none;
76 | }
77 |
78 | a:hover {
79 | outline: 0;
80 | text-decoration: none;
81 | }
82 |
83 | .clearfix, .cf {
84 | zoom: 1;
85 | }
86 |
87 | .clearfix:after, .cf:after {
88 | content: "";
89 | display: block;
90 | height: 0;
91 | clear: both;
92 | visibility: hidden;
93 | }
94 |
95 | * {
96 | -webkit-tap-highlight-color: transparent;
97 | -webkit-appearance: none;
98 | outline: none;
99 | }
100 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #efefef;
3 | font-family: "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial;
4 | min-width: 1280px;
5 | }
6 |
7 | .container {
8 | width: 640px;
9 | margin: 0 auto;
10 | position: relative;
11 | }
12 |
13 | .container .stage {
14 | width: 100%;
15 | height: 2000px;
16 | position: relative;
17 | -webkit-perspective: 742px;
18 | -moz-perspective: 742px;
19 | perspective: 742px;
20 | -webkit-transform-style: preserve-3d;
21 | transform-style: preserve-3d;
22 | }
23 |
24 | .container .stage .control {
25 | transform: translateZ(350px) rotateY(50deg) rotateZ(0deg);
26 | transform-style: preserve-3d;
27 | }
28 |
29 | .container .stage .imgWrap {
30 | position: absolute;
31 | width: 174px;
32 | height: 2000px;
33 | left: 50%;
34 | -webkit-transition: -webkit-transform 1s;
35 | transition: transform 1s;
36 | -webkit-transform-style: preserve-3d;
37 | transform-style: preserve-3d;
38 | animation: photoRotate 20s linear infinite;
39 | }
40 |
41 | .container .stage .imgWrap > div {
42 | width: 174px;
43 | height: 2000px;
44 | overflow: hidden;
45 | position: absolute;
46 | top: 0;
47 | left: 0;
48 | -webkit-transform-origin: 50% 50% 0px;
49 | transform-origin: 50% 50% 0px;
50 | -webkit-transform-style: preserve-3d;
51 | transform-style: preserve-3d;
52 | background-image: url(../images/view.jpg);
53 | background-repeat: no-repeat;
54 | }
55 |
56 | .container .stage .img-bg1 {
57 | background-position: 0px 0;
58 | -webkit-transform: rotateY(18deg) translateZ(543px);
59 | transform: rotateY(18deg) translateZ(543px);
60 | }
61 |
62 | .container .stage .img-bg2 {
63 | background-position: -174px 0;
64 | -webkit-transform: rotateY(36deg) translateZ(543px);
65 | transform: rotateY(36deg) translateZ(543px);
66 | }
67 |
68 | .container .stage .img-bg3 {
69 | background-position: -348px 0;
70 | -webkit-transform: rotateY(54deg) translateZ(543px);
71 | transform: rotateY(54deg) translateZ(543px);
72 | }
73 |
74 | .container .stage .img-bg4 {
75 | background-position: -522px 0;
76 | -webkit-transform: rotateY(72deg) translateZ(543px);
77 | transform: rotateY(72deg) translateZ(543px);
78 | }
79 |
80 | .container .stage .img-bg5 {
81 | background-position: -696px 0;
82 | -webkit-transform: rotateY(90deg) translateZ(543px);
83 | transform: rotateY(90deg) translateZ(543px);
84 | }
85 |
86 | .container .stage .img-bg6 {
87 | background-position: -870px 0;
88 | -webkit-transform: rotateY(108deg) translateZ(543px);
89 | transform: rotateY(108deg) translateZ(543px);
90 | }
91 |
92 | .container .stage .img-bg7 {
93 | background-position: -1044px 0;
94 | -webkit-transform: rotateY(126deg) translateZ(543px);
95 | transform: rotateY(126deg) translateZ(543px);
96 | }
97 |
98 | .container .stage .img-bg8 {
99 | background-position: -1218px 0;
100 | -webkit-transform: rotateY(144deg) translateZ(543px);
101 | transform: rotateY(144deg) translateZ(543px);
102 | }
103 |
104 | .container .stage .img-bg9 {
105 | background-position: -1392px 0;
106 | -webkit-transform: rotateY(162deg) translateZ(543px);
107 | transform: rotateY(162deg) translateZ(543px);
108 | }
109 |
110 | .container .stage .img-bg10 {
111 | background-position: -1566px 0;
112 | -webkit-transform: rotateY(180deg) translateZ(543px);
113 | transform: rotateY(180deg) translateZ(543px);
114 | }
115 |
116 | .container .stage .img-bg11 {
117 | background-position: -1740px 0;
118 | -webkit-transform: rotateY(198deg) translateZ(543px);
119 | transform: rotateY(198deg) translateZ(543px);
120 | }
121 |
122 | .container .stage .img-bg12 {
123 | background-position: -1914px 0;
124 | -webkit-transform: rotateY(216deg) translateZ(543px);
125 | transform: rotateY(216deg) translateZ(543px);
126 | }
127 |
128 | .container .stage .img-bg13 {
129 | background-position: -2088px 0;
130 | -webkit-transform: rotateY(234deg) translateZ(543px);
131 | transform: rotateY(234deg) translateZ(543px);
132 | }
133 |
134 | .container .stage .img-bg14 {
135 | background-position: -2262px 0;
136 | -webkit-transform: rotateY(252deg) translateZ(543px);
137 | transform: rotateY(252deg) translateZ(543px);
138 | }
139 |
140 | .container .stage .img-bg15 {
141 | background-position: -2436px 0;
142 | -webkit-transform: rotateY(270deg) translateZ(543px);
143 | transform: rotateY(270deg) translateZ(543px);
144 | }
145 |
146 | .container .stage .img-bg16 {
147 | background-position: -2610px 0;
148 | -webkit-transform: rotateY(288deg) translateZ(543px);
149 | transform: rotateY(288deg) translateZ(543px);
150 | }
151 |
152 | .container .stage .img-bg17 {
153 | background-position: -2784px 0;
154 | -webkit-transform: rotateY(306deg) translateZ(543px);
155 | transform: rotateY(306deg) translateZ(543px);
156 | }
157 |
158 | .container .stage .img-bg18 {
159 | background-position: -2958px 0;
160 | -webkit-transform: rotateY(324deg) translateZ(543px);
161 | transform: rotateY(324deg) translateZ(543px);
162 | }
163 |
164 | .container .stage .img-bg19 {
165 | background-position: -3132px 0;
166 | -webkit-transform: rotateY(342deg) translateZ(543px);
167 | transform: rotateY(342deg) translateZ(543px);
168 | }
169 |
170 | .container .stage .img-bg20 {
171 | background-position: -3306px 0;
172 | -webkit-transform: rotateY(360deg) translateZ(543px);
173 | transform: rotateY(360deg) translateZ(543px);
174 | }
175 |
176 | @keyframes photoRotate {
177 | 0% {
178 | -webkit-transform: rotateY(0deg);
179 | transform: rotateY(0deg);
180 | }
181 | 100% {
182 | -webkit-transform: rotateY(360deg);
183 | transform: rotateY(360deg);
184 | }
185 | }
186 |
--------------------------------------------------------------------------------
/html/3dView2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 3d View Demo2
6 |
7 |
8 |
9 |
10 |
11 |
12 |
20 |
21 |
22 |
23 | 
24 |
25 | 3d View
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
3d View
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |