实现图片旋转木马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立 ...
随机推荐
- ElasticSearch入门简介
ElasticSearch是基于Apache Lucene的分布式搜索引擎, 提供面向文档的搜索服务.本文以6.2.3版本为例介绍ElasticSearch的应用. 本文首先介绍ElasticSear ...
- Fibonacci快速实现（优化）
斐波那契数列的通俗解法是利用递推公式进行递归求解,我们可以更优化的去解决它. 方法一:通项公式 斐波那契数列的递推公式是f(n)=f(n-1)+f(n-2),特征方程为:x2=x+1,解该方程得(1+ ...
- Vim 多行剪切、复制和删除
剪切 快捷键方式: dd:剪切光标所处当前行 n + dd:剪切光标所在行及以下共 n 行 按 p 粘贴在光标所在行 命令行方式: 例如剪切1到10行,并粘贴在12行处: 1,10 m 12 复制 快 ...
- Umbraco 资源推荐
Umbraco 社区 Umbraco 官方社区.找到人们谈论当前的 Umbraco 主题的最好方法是通过 Twitter.Umbraco 也知道他们很多的聚会和节日在世界各地举行.Umbraco 的开 ...
- Spring Security之Remember me详解
Remember me功能就是勾选"记住我"后,一次登录,后面在有效期内免登录. 先看具体配置: pom文件: <dependency> <groupId> ...
- CentOS7下查看系统环境（内存CPU磁盘使用率）
1.方法一 yum install atop --安装atop sudo atop--开启监视 2.方法二 top 3.方法三 free --查看没存情况 ps ux --查看CPU 情况 磁盘 df
- 【原】Spring AOP实现对Redis的缓存同步
前言:刚开始采用spring cache作为缓存数据,到后面发现扩展性不灵活,于是基于sprig cache原理自定义一套规则用于缓存数据. 请求过程: 根据请求参数生成Key,后面我们会对生成Key ...
- 【Java并发编程】18、PriorityBlockingQueue源码分析
PriorityBlockingQueue是一个基于数组实现的线程安全的无界队列,原理和内部结构跟PriorityQueue基本一样,只是多了个线程安全.javadoc里面提到一句,1:理论上是无界的 ...
- csharp: FTP Client Library using System.Net.FtpWebRequest
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...
- 2017-12-02 编程语言试验之Antlr4+JavaScript实现"圈4"
参考: ANTLR4: Making a compiler with the JavaScript runtime 演示效果虽弱, 还是先上图吧: 在线演示: 地址. 源码库: program-in- ...