transform属性和transition过渡属性,结合jQuery代码实现翻转功能。

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d翻转相册</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
.container {
position: relative;
width: 560px;
height: 380px;
margin: 0 auto;
}
.items {
height: 100%;
margin: 100px auto;
transform-style: preserve-3d;
/*实现自动翻转效果,这里只设置翻转一次*/
animation: autoMove 3s 1 linear;
/*点击翻转 过渡效果*/
transition: all 0.5s;
}
.item {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid #c18;
         
font-size: 50px;
         }
/*设置不同的bgc,方便区分*/
.item:nth-child(1) {
/*background-image: url("images/01.jpg");*/
background-color: #cc1188;
}
.item:nth-child(2) {
/*background-image: url("images/02.jpg");*/
background-color: #0094ff;
}
.item:nth-child(3) {
/*background-image: url("images/03.jpg");*/
background-color: #22ff22;
}
.item:nth-child(4) {
/*background-image: url("images/04.jpg");*/
background-color: #666666;
}
/*定义动画*/
@keyframes autoMove {
from { }
to {
transform: rotateX(360deg);
}
}
/*设置左右翻页箭头样式*/
.left, .right {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
font-size: 50px;
background-color: darkslategray;
opacity: .5;
position: absolute;
top: 50%;
margin-top: -25px;
cursor: pointer;
}
.left {
left: -25px;
}
.right {
right: -25px;
}
</style>
<script>
$(function () {
var itemNum = $(".items>.item").length;
var itemDeg = 360 / itemNum;
$(".items .item").each(function (index, element) {
$(element).css({
transform: "rotateX(" + index * itemDeg + "deg) translateZ(190px)"
});
});
var count = 0;//记录点击的次数,右击加1,左击减1
$(".container .arrow .right").click(function () {
count++;
$(".items").css({
transform: "rotateX("+-90*count+"deg)"
}); });
$(".container .arrow .left").click(function () {
count--;
$(".items").css({
transform: "rotateX("+-90*count+"deg)"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="arrow">
<div class="left"><</div>
<div class="right">></div>
</div>
</div>
</body>
</html>

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

  1. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

  2. css3 3d翻转效果

    <div class="demo">       <span class="front">            aaaaaaaaaaa ...

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

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

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

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  5. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  6. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

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

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  8. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. web安全测试资料

    最近因为工作需要,整理了安全测试工具AppScan的一个教程.目录如下: 网上对于appscan的资料挺多,但是也很乱很杂.不利于系统的学习,这也是我为什么整理这样一份指导手册. 在这份手册里,主要包 ...

  2. 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  3. react-native环境搭建

    目标平台 Android 开发平台 windows 开发环境安装建议:由于开发环境存在差异,建议参照react官网 或者react中文网 安装, react-native -- 在Windows下搭建 ...

  4. OpenCASCADE BRep vs. OpenNURBS BRep

    OpenCASCADE BRep vs. OpenNURBS BRep eryar@163.com Abstract. BRep short for Boundary Representation. ...

  5. Unity Shaders 第一个默认程序分析

    Unity Shaders 第一个默认程序 Shader "Custom/Shader" { Properties { _MainTex ("Base (RGB)&quo ...

  6. Android实现对图片的缩放、剪切、旋转、存储

    转载:http://www.cnblogs.com/jerehedu/p/4464870.html 一.问题描述: 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片 ...

  7. Linux笔记之——Linux关机命令详解(转)

    原文连接:http://www.jb51.net/os/RedHat/1334.html 在linux下一些常用的关机/重启命令有shutdown.halt.reboot.及init,它们都可以达到重 ...

  8. 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...

  9. MySQL线程池

    MySQL线程池只在Percona,MariaDB,Oracle MySQL企业版中提供.Oracle MySQL社区版并不提供. 在传统方式下,MySQL线程调度方式有两种:每个连接一个线程(one ...

  10. 如何用Pivot实现行列转换

    在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...