CSS33D翻转相册

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 () {
 86                 count++;
 87                 $(".items").css({
 88                     transform: "rotateX("+-90*count+"deg)"
 89                 });
 90 
 91             });
 92             $(".container .arrow .left").click(function () {
 93                 count--;
 94                 $(".items").css({
 95                     transform: "rotateX("+-90*count+"deg)"
 96                 });
 97             });
 98         });
 99     script>
100 head>
101 body>
102     div class="container">
103         div class="items">
104             div class="item">1div>
105             div class="item">2div>
106             div class="item">3div>
107             div class="item">4div>
108         div>
109         div class="arrow">
110             div class="left">