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>
时间: 2024-10-10 01:03:35

CSS3——3D翻转相册的相关文章

css3 3d翻转

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>css3 3d翻转</title><meta name="description" content="" /><meta name="keywords" content="" /><scrip

CSS3 3D翻转动画

CSS3动画属性:transform(变换):大小.位置.颜色.变形等状态的变化transition(过渡):初始状态过渡到结束状态这个过程中产生的动画animation(动画):定义关键帧动画 CSS3可以实现多种动画效果,下面说的是CSS3实现一个3D翻转的动画效果. <div class="container"> <div class="wrapHover> <div class="wrap"> <div c

css3 3d翻转效果

<div class="demo">       <span class="front">            aaaaaaaaaaaaaa       </span>        <span class="behind">            bbbbbbb       </span> </div> .demo{ display: block; cursor: poi

jQuery和CSS3超酷3d翻转图片幻灯片插件

这是一款效果非常炫酷的jQuery和CSS3 3d翻转图片幻灯片插件.这个幻灯片插件开始的时候图片都堆叠在一起,当用户点击了其中的某张图片后,该图片会以3D翻转的方式"飞"到堆叠图片的最前面. 在该幻灯片插件中使用了 CSS3 transition.CSS3 animations 和 CSS3 transforms,并用jQuery来处理鼠标点击事件. 在线演示:http://www.htmleaf.com/Demo/201502081346.html 下载地址:http://www.

CSS3之图片3D翻转效果(网页效果--每日一更)

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://localhost:63342/webfront/PC/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div

基于css3的文字3D翻转特效

一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="component"> <ul class="grid"> <li> <div class="codrops-header"> <h1> Animated Opening Type</h1> </d

一款纯css3实现的图片3D翻转幻灯片

之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div style="width: 850px; margin: auto;"> <h1> pure CSS slice cube slideshow</h1> <style> @import 'http://codepen.i

css3+jquery制作3d旋转相册&lt;转&gt;

css3+jquery制作3d旋转相册 首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准备 新建三个文件夹分别命名为css,js,img分别存放demo.css,jquery.js.demo.js,11张示例图片.新建demo.html将demo.css,jquery.js,demo.js引入. 二.图片倒影制作 1 <div id="wr

在CSS3中图片3D翻转效果是这样做到的

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://webfront.verynet.cc/pc/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div class