实现图片旋转木马3D浏览效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 transform实现图片旋转木马3D浏览效果 </title>
<link rel="stylesheet" href="../css/demo.css" type="text/css">
<style>
.stage_area {
width: 900px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
padding: 100px 50px;
background-color: #f0f0f0;
box-shadow: inset 0 0 3px rgba(0,0,0,.35);
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-transition: top .5s;
position: relative;
top: 0;
}
.container {
width: 200px;
height: 100px;
margin-left: -64px;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 50%;
}
.piece {
width: 200px;
box-shadow: 0 1px 3px rgba(0,0,0,.5);
-webkit-transition: opacity 1s, -webkit-transform 1s;
-moz-transition: opacity 1s, -moz-transform 1s;
transition: opacity 1s, transform 1s;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="main">
<h1>CSS3 transform实现图片旋转木马3D浏览效果实例页面</h1>
<div id="body" class="light">
<div id="content" class="show">
<div class="demo">
<div id="stage" class="stage_area">
<div id="container" class="container" style="-webkit-transform: rotateY(-760deg);">
<img id="piece1" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" class="piece" style="-webkit-transform: rotateY(0deg) translateZ(195.83855484509584px);">
<img id="piece8" src="http://image.zhangxinxu.com/image/study/s/s128/mm8.jpg" class="piece" style="-webkit-transform: rotateY(40deg) translateZ(195.83855484509584px);">
<img id="piece3" src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" class="piece" style="-webkit-transform: rotateY(80deg) translateZ(195.83855484509584px);">
<img id="piece4" src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg" class="piece" style="-webkit-transform: rotateY(120deg) translateZ(195.83855484509584px);">
<img id="piece6" src="http://image.zhangxinxu.com/image/study/s/s128/mm6.jpg" class="piece" style="-webkit-transform: rotateY(160deg) translateZ(195.83855484509584px);">
<img id="piece7" src="http://image.zhangxinxu.com/image/study/s/s128/mm7.jpg" class="piece" style="-webkit-transform: rotateY(200deg) translateZ(195.83855484509584px);">
<img id="piece10" src="http://image.zhangxinxu.com/image/study/s/s128/mm10.jpg" class="piece" style="-webkit-transform: rotateY(240deg) translateZ(195.83855484509584px);">
<img id="piece13" src="http://image.zhangxinxu.com/image/study/s/s128/mm13.jpg" class="piece" style="-webkit-transform: rotateY(280deg) translateZ(195.83855484509584px);">
<img id="piece15" src="http://image.zhangxinxu.com/image/study/s/s128/mm15.jpg" class="piece" style="-webkit-transform: rotateY(320deg) translateZ(195.83855484509584px);">
</div>
</div>
</div>
</div>
</div>
<script>
(function () {
if (typeof window.screenX === "number") {
// 随机颜色HSL
var randomHsl = function () {
return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)";
}
// CSS transform变换应用
, transform = function (element, value, key) {
key = key || "Transform";
["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix) {
element.style[prefix + key] = value;
});
return element;
}
// 浏览器选择器API
, $ = function (selector) {
return document.querySelector(selector);
}, $$ = function (selector) {
return document.querySelectorAll(selector);
};
// 显示图片
var htmlPic = '', arrayPic = [1, 8, 3, 4, 6, 7, 10, 13, 15], rotate = 360 / arrayPic.length;
arrayPic = [
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-292/58-126800-000-292_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-155/58-126800-000-155_200X76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-180/58-126800-000-180_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-056/58-126800-000-056_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-151/58-126800-000-151_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-150/58-126800-000-150_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-176/58-126800-000-176_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-156/58-126800-000-156_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-Z00-902/58-126800-Z00-902_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-555/58-126800-000-555_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-055/58-126800-000-055_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-149/58-126800-000-149_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-Z00-904/58-126800-Z00-904_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-293/58-126800-000-293_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-063/58-126800-000-063_200x76.png",
"http://de.vtechda.com/Data/Store/US/InnoTab/58-126800-000-291/58-126800-000-291_200x76.png"
]
var aa = 0;
arrayPic.forEach(function (i) {
htmlPic = htmlPic + '<img id="piece' + aa + '" src="' + arrayPic[aa] + '" class="piece" />';
aa++;
});
// 元素
var eleStage = $("#stage"), eleContainer = $("#container"), indexPiece = 0;
// 元素
var elePics = $$(".piece"), transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI);
eleContainer.innerHTML = htmlPic;
eleContainer.addEventListener("click", function () {
transform(this, "rotateY(" + (-1 * rotate * ++indexPiece) + "deg)");
});
aa = 0;
arrayPic.forEach(function (i, j) {
transform($("#piece" + aa), "rotateY(" + j * rotate + "deg) translateZ(" + (transZ + 130) + "px)");
aa++;
});
setInterval(function () { transform(eleContainer, "rotateY(" + (-1 * rotate * ++indexPiece) + "deg)"); }, 2000);
} else {
alert("window.screenX === 'number'");
}
})();
</script>
</body>
</html>
实现图片旋转木马3D浏览效果的更多相关文章
- WPF换肤之八：创建3D浏览效果
原文:WPF换肤之八:创建3D浏览效果 上节中,我们展示了WPF中的异步以及界面线程交互的方式,使得应用程序的显示更加的流畅.这节我们主要讲解如何设计一个具有3D浏览效果的天气信息浏览器. 效果显示 ...
- 扑面而来的碎片--图片3D炸裂效果初体验
之前逛园子的时候看到 ChokCoco 的爆炸效果作品:[BOOM]一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←),觉得蛮有意思的,效果如下: 不过觉得这个爆炸效果还是偏软了一 ...
- 图片设置3D效果
/** * 图片绘制3d效果 * @param srcImage * @param radius * @param border * @param padding * @return * @throw ...
- 利用纯CSS3实现超立体的3D图片侧翻倾斜效果
原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...
- 实现一个图片轮播-3d播放效果
前言:最近在做一个音乐播放器,首页要做一个图片轮播,看了bootstrap的carousel插件以及移动端的swipe.js库,都是平面图片轮播的效果,所以自己想着实现类似网易云app里那种3d图片轮 ...
- JavaScript仿百度图片浏览效果（转载）
转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...
- 拜托，使用Three.js让二维图片具有3D效果超酷的好吗 💥
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 逛 sketchfab 网站的时候我看到有很多二维平面转 3D 的模型例子 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
随机推荐
- [转]VR原理讲解及开发入门
本文转自:http://www.52vr.com/article-661-1.html 本文是作者obuil根据多年心得专门为想要入门的VR开发者所写,由52VR网站提供支持. 1. VR沉浸感和 ...
- 解决SQL Server 2008安装时提示:重新启动计算机 失败
a.重启机器,再进行安装,如果发现还有该错误,请按下面步骤: b.在开始->运行中输入regedit c.到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet ...
- ssm简单整合（注释方法）
1.创建web工程,选择web.xml文件,并导入相关jar包(使用的spring4.0以上版本,) 2.配置web.xml文件,包括spring.xml,springMVC.xml的加载映射,核心操 ...
- hash table (youtube 2)
https://www.youtube.com/watch?v=jEdaduyLLqY
- Python 字符编码简记
名称 说明 ASCII 只能存英文和拉丁字符,一个字符占一个字节,8位. ASCII 码是不支持中文的,支持中文的第一张表是 GB2312 GB2312 支持中文,收录了 7445个字符 GBK1.0 ...
- CSS之HTML meta viewport属性详解
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机 ...
- git命令详解（ 八）
此为记录git的第八篇,前七篇为远程篇,工作中最常用的都在前七篇,因为要在远程分支上合作开发 在提交树上移动 撤销变更 在提交树上移动 在接触 Git 更高级功能之前,我们有必要先学习在你项目 ...
- 视觉slam领域经典综述和具体应用场景
一.经典综述文章 1. Durrant-Whyte H, Bailey T. Simultaneous localization and mapping: part I[J]. IEEE robot ...
- recovery uncrypt功能解析(bootable/recovery/uncrypt/uncrypt.cpp)
我们通常对一个文件可以直接读写操作,或者普通的分区(没有文件系统)也是一样,直接对/dev/block/boot直接读写,就可以获取里面的数据内容了. 当我们在ota升级的时候,把升级包下载到cach ...
- asp.net学习——Response对象
(2011-03-29 07:33:03) 转载▼ 标签: 杂谈 分类: asp.net学习 响应的缓冲输出:为了提高服务器的性能,asp.net向浏览器Write的时候默认并不会每Write一次都会 ...