sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > CSS33D翻转相册

CSS33D翻转相册

作者:xuhongji发布时间:2020-09-19分类:Html浏览:104评论:0


导读:transform属性和transition过渡属性,结合jQuery代码实现翻转功能。1˂!DOCTYPEhtml˃2˂htmllang=...
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?1.1.15">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     <p class="container">
103         <p class="items">
104             <p class="item">1p>
105             <p class="item">2p>
106             <p class="item">3p>
107             <p class="item">4p>
108         p>
109         <p class="arrow">
110             <p class="left"><>
111             <p class="right">>p>
112         p>
113     p>
114 body>
115 html>


欢迎 发表评论:

Html排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章