CSS3——3D翻转相册
Posted 空白/
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3——3D翻转相册相关的知识，希望对你有一定的参考价值。
transform属性和transition过渡属性，结合jQuery代码实现翻转功能。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3d翻转相册</title>
6 <script src="jquery-3.0.0.min.js"></script>
7 <style>
8 .container {
9 position: relative;
10 width: 560px;
11 height: 380px;
12 margin: 0 auto;
13 }
14 .items {
15 height: 100%;
16 margin: 100px auto;
17 transform-style: preserve-3d;
18 /*实现自动翻转效果，这里只设置翻转一次*/
19 animation: autoMove 3s 1 linear;
20 /*点击翻转 过渡效果*/
21 transition: all 0.5s;
22 }
23 .item {
24 width: 100%;
25 height: 100%;
26 position: absolute;
27 border: 1px solid #c18;
font-size: 50px;
28 }
29 /*设置不同的bgc，方便区分*/
30 .item:nth-child(1) {
31 /*background-image: url("images/01.jpg");*/
32 background-color: #cc1188;
33 }
34 .item:nth-child(2) {
35 /*background-image: url("images/02.jpg");*/
36 background-color: #0094ff;
37 }
38 .item:nth-child(3) {
39 /*background-image: url("images/03.jpg");*/
40 background-color: #22ff22;
41 }
42 .item:nth-child(4) {
43 /*background-image: url("images/04.jpg");*/
44 background-color: #666666;
45 }
46 /*定义动画*/
47 @keyframes autoMove {
48 from { }
49 to {
50 transform: rotateX(360deg);
51 }
52 }
53 /*设置左右翻页箭头样式*/
54 .left, .right {
55 width: 50px;
56 height: 50px;
57 line-height: 50px;
58 text-align: center;
59 color: white;
60 font-size: 50px;
61 background-color: darkslategray;
62 opacity: .5;
63 position: absolute;
64 top: 50%;
65 margin-top: -25px;
66 cursor: pointer;
67 }
68 .left {
69 left: -25px;
70 }
71 .right {
72 right: -25px;
73 }
74 </style>
75 <script>
76 $(function () {
77 var itemNum = $(".items>.item").length;
78 var itemDeg = 360 / itemNum;
79 $(".items .item").each(function (index, element) {
80 $(element).css({
81 transform: "rotateX(" + index * itemDeg + "deg) translateZ(190px)"
82 });
83 });
84 var count = 0;//记录点击的次数，右击加1，左击减1
85 $(".container .arrow .right").click(function () {