首页 > 代码库 > CSS3——3D翻转相册

CSS3——3D翻转相册

2024-08-11 18:43:21   214人阅读

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>

CSS3——3D翻转相册


联系
我们