CSS33D翻转相册-html教程-PHP中文网

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"><>
111             <div class="right">>div>
112         div>
113     div>
114 body>
115 html>

jQuery带樱花相册旋转展示特效

jQuery带樱花相册旋转展示特效是一款带樱花下落效果的相册旋转展示动画特效。

下载