你的位置:首页 > 网页设计

[网页设计]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 () { 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">1</div>105       <div class="item">2</div>106       <div class="item">3</div>107       <div class="item">4</div>108     </div>109     <div class="arrow">110       <div class="left"><</div>111       <div class="right">></div>112     </div>113   </div>114 </body>115 </html>