首页 > > 网页制作 > css >

CSS3——3D翻转相册

2018-06-24 00:17:06来源：未知阅读 ()

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>