CSS3——3D翻转相册
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翻转相册的更多相关文章
- CSS3—3D翻转
本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...
- css3 3d翻转效果
<div class="demo"> <span class="front"> aaaaaaaaaaa ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 基于css3的文字3D翻转特效
一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="compo ...
- 简单几步用纯CSS3实现3D翻转效果
作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...
- CSS3 3D立方体翻转菜单实现教程
今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...
- 一款纯css3实现的图片3D翻转幻灯片
之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览 源码下载 实现的代码. ht ...
- 纯css3响应式3d翻转菜单
前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...
- 纯css3 3D图片立方体旋转动画特效
纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...
随机推荐
- web安全测试资料
最近因为工作需要,整理了安全测试工具AppScan的一个教程.目录如下: 网上对于appscan的资料挺多,但是也很乱很杂.不利于系统的学习,这也是我为什么整理这样一份指导手册. 在这份手册里,主要包 ...
- 设计与开发一款简单易用的Web报表工具（支持常用关系数据及hadoop、hbase等)
EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...
- react-native环境搭建
目标平台 Android 开发平台 windows 开发环境安装建议:由于开发环境存在差异,建议参照react官网 或者react中文网 安装, react-native -- 在Windows下搭建 ...
- OpenCASCADE BRep vs. OpenNURBS BRep
OpenCASCADE BRep vs. OpenNURBS BRep eryar@163.com Abstract. BRep short for Boundary Representation. ...
- Unity Shaders 第一个默认程序分析
Unity Shaders 第一个默认程序 Shader "Custom/Shader" { Properties { _MainTex ("Base (RGB)&quo ...
- Android实现对图片的缩放、剪切、旋转、存储
转载:http://www.cnblogs.com/jerehedu/p/4464870.html 一.问题描述: 在开发中,当我们需要的有一张大图片同时还需要一些小图片时,我们只需要通过代码对此图片 ...
- Linux笔记之——Linux关机命令详解(转)
原文连接:http://www.jb51.net/os/RedHat/1334.html 在linux下一些常用的关机/重启命令有shutdown.halt.reboot.及init,它们都可以达到重 ...
- 用javascript做一个视频播放器
以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...
- MySQL线程池
MySQL线程池只在Percona,MariaDB,Oracle MySQL企业版中提供.Oracle MySQL社区版并不提供. 在传统方式下,MySQL线程调度方式有两种:每个连接一个线程(one ...
- 如何用Pivot实现行列转换
在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...