html图片 3d切换特效,一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效。单击图片下方的滑块会切换上方的图片。动起你的鼠标试试吧，效果图如下：

实现的代码。

html代码：

Bedouin

Blue-green

Dramatic Fake

Snow

id="ranger">

css3代码：

#imgdex

{

position: relative;

-webkit-perspective: 4000px;

perspective: 4000px;

width: 80%;

max-width: 1200px;

margin: 0 auto;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

font-family: Avenir, Calibri, sans-serif;

padding-top: 45%;

}

#imgdex figure, #imgdex figure figcaption

{

position: absolute;

-webkit-transition: 1s ease-in-out;

transition: 1s ease-in-out;

}

#imgdex figure

{

top:;

left: 120px;

-webkit-transform-origin: left bottom;

-ms-transform-origin: left bottom;

transform-origin: left bottom;

width: 70%;

}

#imgdex figure img

{

width: 100%;

}

#imgdex figure figcaption

{

bottom:;

font-size: 1.2rem;

left: -8rem;

opacity:;

}

#imgdex figure:last-of-type

{

-webkit-transform: rotateX(5deg);

transform: rotateX(5deg);

box-shadow: 0px 0px 200px rgba(0,0,0,0.5);

}

form

{

text-align: center;

padding-bottom: 2rem;

}

form input[type="range"]

{

width: 50%;

}

js代码：

var imgdex = document.getElementById('imgdex'), figs = imgdex.querySelectorAll('figure'), imgcount = figs.length;

ranger.max = imgcount;

ranger.value = imgcount;

for (var i = 0; i < imgcount - 1; i++) {

if (window.CP.shouldStopExecution(1)) {

break;

}

var rotation = parseFloat(-92 + '.' + (imgcount - i));

figs[i].style.webkitTransform = 'rotateX(' + rotation + 'deg)';

figs[i].style.transform = 'rotateX(' + rotation + 'deg)';

}

window.CP.exitedLoop(1);

document.querySelector('#imgdex figure:last-child figcaption').style.opacity = 1;

function updateImage(slider) {

var currentimg = document.querySelector('#imgdex figure:nth-child(' + slider.value + ')');

if (slider.oldvalue !== undefined) {

var oldimg = document.querySelector('#imgdex figure:nth-child(' + slider.oldvalue + ')');

} else {

slider.oldvalue = imgcount;

var oldimg = document.querySelector('#imgdex figure:nth-child(' + slider.oldvalue + ')');

}

if (slider.value < slider.oldvalue) {

currentimg.style.webkitTransform = 'rotateX(' + slider.value + 'deg)';

currentimg.style.transform = 'rotateX(' + slider.value + 'deg)';

}

if (slider.value > slider.oldvalue) {

var rotation = parseFloat(-92 + '.' + (imgcount - slider.value));

oldimg.style.webkitTransform = 'rotateX(' + rotation + 'deg)';

oldimg.style.transform = 'rotateX(' + rotation + 'deg)';

}

if (slider.value !== slider.oldvalue) {

currentimg.querySelector('figcaption').style.opacity = 1;

oldimg.querySelector('figcaption').style.opacity = 0;

}

}

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

基于jQuery适合做图片类网站的特效

分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码:

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

一款基于css3的动画按钮

之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码:

随机推荐

Caliburn&period;Micro学习笔记&lpar;一&rpar;----引导类和命名匹配规则

Caliburn.Micro学习笔记目录 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详 ...

python中paramiko模块的使用

paramiko是python一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接1.可以远程操作服务器文件 例如: df:查看磁盘使用情况 mkdir:创建目录 mv/cp/mk ...

添加 Gradle 依赖与 build&period;gradle 配置初识

添加 Gradle 我们可以到我们添加 Maven 依赖的网站 Maven Repository: Search/Browse/Explore http://mvnrepository.com/ 上查 ...

java的nio之：java的nio系列教程之概述

一:java的nio的核心组件?Java NIO 由以下几个核心部分组成: ==>Channels ==>Buffers ==>Selectors 虽然Java NIO 中除此之外还 ...

verilog实现的16位CPU单周期设计

verilog实现的16位CPU单周期设计 这个工程完成了16位CPU的单周期设计,模块化设计,包含对于关键指令的仿真与设计,有包含必要的分析说明. 单周期CPU结构图 单周期CPU设计真值表与结构图 ...

perl6之&&num;39&semi;Hello World&&num;39&semi;

安装完perl6之后,当然是要写一下Hello World了. 因为perl6的脚本一般都很短小,所以用不着很笨重的IDE之类的东西,我们用VIM,sublime text这种小型的编辑器 来开始pe ...

关于Oracle数据库字符集的选择

如果数据库只在中国地区使用,数据库字符集选择ZHS16GBK或者常用中文字符集,如果不确定,就推荐使用AL32UTF8 国家字符集就选择: AL16UTF16 字符集一旦设定,不允许修改,修改可能出现 ...

Mojo Mysql utf-8字符集 需要&lbrace;mysql&lowbar;enable&lowbar;utf8 &equals;&gt&semi; 1&rcub;

get '/api/log_mon/get_log' => sub{ my $c = shift; my $env = $c->param('env'); my $host = $c-&g ...

centos 6&period;5常见lib库安装

在CentOS安装软件的时候,可能缺少一部分支持库,而报错.这里首先安装系统常用的支持库.那么在安装的时候就会减少很多的错误的出现. # yum install -y gcc gdb strace g ...

面试-java反射

问题:简述Java中的反射使用 答: 1.作用: 可以通过配置文件来动态配置和加载类,以实现软件工程理论里所提及的类与类,模块与模块之间的解耦.反射最经典的应用是spring框架. 2. 定义 反射简 ...