模板3D切割轮播图

今天分享一个案例,C3中的3D转化,实现切割样式的轮播图,接下来进入正题;

1533195043217

样式就是这样的,怎么实现呢,其实,这些都是障眼法,好多动画其实都是障法.

思路 : 首先,观察前面切割的样式,这就是五个 li 里面呢是4个span , 整体呢是一个大的ul

​ 用来做包裹,首先先将大概的样式做出来 , 先不使用图片用背景颜色代替,但是注意所有的面都是朝着正面的,如果是后面的那个面,内容就会朝里面,而样式也就看不到了,这就需要一定的思维能力了,好了,接下来代码实现!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 更具图片大小定盒子大小 */
        
        .container {
            position: relative;
            width: 560px;
            height: 300px;
            margin: 100px auto;
            perspective: 800px;
        }
        
        .container ul {
            width: 560px;
            height: 300px;
            list-style: none;
            margin: 0;
            padding: 0;
            transform-style: preserve-3d;
            /* 将2d转为3d */
            transform: rotateY(-45deg);
        }
        
        .container li {
            position: relative;
            width: 112px;
            height: 300px;
            transform-style: preserve-3d;
            float: left;
        }
        
        .container li span {
            width: 112px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .container .front {
            transform: translateZ(150px);
            background-color: rgb(211, 208, 44);
        }
        
        .container .back {
            background-color: rgb(9, 144, 185);
            transform: translateZ(-150px) rotateX(180deg);
        }
        
        .container .top {
            transform: translateY(-150px) rotateX(90deg);
            background-color: rgb(255, 17, 0);
        }
        
        .container .bottom {
            background-color: rgb(197, 7, 140);
            transform: translateY(150px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <!-- 首先有一个大盒子进行包裹 -->
    <div class="container">
        <ul>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
        </ul>
    </div>
</body>

</html>

1533200213555

这是目前的效果图,接下来附加图片就OK了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 更具图片大小定盒子大小 */
        
        .container {
            position: relative;
            width: 560px;
            height: 300px;
            margin: 100px auto;
            perspective: 800px;
        }
        
        .container ul {
            width: 560px;
            height: 300px;
            list-style: none;
            margin: 0;
            padding: 0;
            transform-style: preserve-3d;
            /* 将2d转为3d */
            transform: rotateY(-45deg);
        }
        
        .container li {
            position: relative;
            width: 112px;
            height: 300px;
            transform-style: preserve-3d;
            float: left;
        }
        
        .container li span {
            width: 112px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .container .front {
            transform: translateZ(150px);
            /* background-color: rgb(211, 208, 44); */
            background: url(images/q1.jpg) no-repeat;
        }
        
        .container .back {
            /* background-color: rgb(9, 144, 185); */
            transform: translateZ(-150px) rotateX(180deg);
            background: url(images/q3.jpg) no-repeat;
        }
        
        .container .top {
            transform: translateY(-150px) rotateX(90deg);
            /* background-color: rgb(255, 17, 0); */
            background: url(images/q2.jpg) no-repeat;
        }
        
        .container .bottom {
            /* background-color: rgb(197, 7, 140); */
            background: url(images/q4.jpg) no-repeat;
            transform: translateY(150px) rotateX(-90deg);
        }
        
        .container li:nth-child(2) span {
            background-position: -112px;
        }
        
        .container li:nth-child(3) span {
            background-position: -224px;
        }
        
        .container li:nth-child(4) span {
            background-position: -336px;
        }
        
        .container li:nth-child(5) span {
            background-position: -448px;
        }
        
        .btn {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(25, 25, 25, 0.5);
            color: #FFF;
            font-size: 40px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
        
        .prev {
            left: 0;
        }
        
        .next {
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 首先有一个大盒子进行包裹 -->
    <div class="container">
        <ul>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
        </ul>
        <a href="javascript:;" class="btn prev" id="prev">&lt;</a>
        <a href="javascript:;" class="btn next" id="next">&gt;</a>
    </div>
</body>

</html>

1533200826445

样式就是这样了,接下来恢复一下写js就好了~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 更具图片大小定盒子大小 */
        
        .container {
            position: relative;
            width: 560px;
            height: 300px;
            margin: 100px auto;
            /* perspective: 800px; */
        }
        
        .container ul {
            width: 560px;
            height: 300px;
            list-style: none;
            margin: 0;
            padding: 0;
            transform-style: preserve-3d;
            /* 将2d转为3d */
            /* transform: rotateY(-45deg); */
        }
        
        .container li {
            position: relative;
            width: 112px;
            height: 300px;
            transform-style: preserve-3d;
            float: left;
            transition: all 1s;
        }
        
        .container li span {
            width: 112px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .container .front {
            transform: translateZ(150px);
            /* background-color: rgb(211, 208, 44); */
            background: url(images/q1.jpg) no-repeat;
        }
        
        .container .back {
            /* background-color: rgb(9, 144, 185); */
            transform: translateZ(-150px) rotateX(180deg);
            background: url(images/q3.jpg) no-repeat;
        }
        
        .container .top {
            transform: translateY(-150px) rotateX(90deg);
            /* background-color: rgb(255, 17, 0); */
            background: url(images/q2.jpg) no-repeat;
        }
        
        .container .bottom {
            /* background-color: rgb(197, 7, 140); */
            background: url(images/q4.jpg) no-repeat;
            transform: translateY(150px) rotateX(-90deg);
        }
        
        .container li:nth-child(2) span {
            background-position: -112px;
        }
        
        .container li:nth-child(3) span {
            background-position: -224px;
        }
        
        .container li:nth-child(4) span {
            background-position: -336px;
        }
        
        .container li:nth-child(5) span {
            background-position: -448px;
        }
        
        .btn {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(25, 25, 25, 0.5);
            color: #FFF;
            font-size: 40px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
        
        .prev {
            left: 0;
        }
        
        .next {
            right: 0;
        }
    </style>
</head>

<body>
    <!-- 首先有一个大盒子进行包裹 -->
    <div class="container">
        <ul>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
            <li>
                <span class="front"></span>
                <span class="top"></span>
                <span class="back"></span>
                <span class="bottom"></span>
            </li>
        </ul>
        <a href="javascript:;" class="btn prev" id="prev">&lt;</a>
        <a href="javascript:;" class="btn next" id="next">&gt;</a>
    </div>

    <script>
        var prev = document.getElementById('prev');
        var next = document.getElementById('next');
        var lis = document.querySelectorAll('li');
        var index = 0; // 用于设置图片的索引
        var flag = false;

        next.onclick = function() {
            // 由于发现问题,当按钮快速点击的时候会产生bug,所以加一下代码
            if (flag == false) {
                flag = true;
                index++;

                for (var i = 0, len = lis.length; i < len; i++) {
                    lis[i].style.transform = 'rotateX(' + -index * 90 + 'deg)'
                    lis[i].style.transitionDelay = i * 0.3 + 's';
                }
                setTimeout(function() {
                    flag = false;
                }, 2200)
            }
        };

        prev.onclick = function() {
            // 由于发现问题,当按钮快速点击的时候会产生bug,所以加一下代码
            if (flag == false) {
                flag = true;
                index--;

                for (var i = 0, len = lis.length; i < len; i++) {
                    lis[i].style.transform = 'rotateX(' + -index * 90 + 'deg)'
                    lis[i].style.transitionDelay = i * 0.3 + 's';
                }
                setTimeout(function() {
                    flag = false;
                }, 2200)
            }
        };
    </script>
</body>

</html>

1533201571469

本文标题:模板3D切割轮播图

文章作者:李大玄

发布时间:2018-08-02, 15:21:45

最后更新:2018-08-02, 17:20:35

原始链接:http://yoursite.com/2018/08/02/3D切割轮播图/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
|