实现图片旋转木马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立 ...
随机推荐
- SpringMVC4返回json
前言 目前前后端分离后,接口大多数返回给前端的都是json数据,那么我尝试用SpringMVC4的Controller返回json.demo过程中遇到了几个问题写出来和java初学者分享一下. 开发环 ...
- HTML之marquee(文字滚动)详解
语法: <marquee></marquee> 以下是一个最简单的例子: 代码如下: <marquee><font size=+3 color=red> ...
- Docker 安装MySQL5.7（三）
Docker 安装MySQL5.7 1.搜索docker镜像(可以看到搜索的结果,这个结果是按照一定的星级评价规则排序的) docker search mysql 2.拉取docker的mysql镜像 ...
- java-两个整数变量的交换-不需要定义第三方变量
代码如下: class Example { public static void main(String[] args) { /* * 位异或运算符的特点 * ^的特点:一个数据对另一个数据位异或两次 ...
- linux学习笔记-lrmi源码包的编译安装方法
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 官方的lrmi包没有人更新了,如果碰到需要这个编译安装这个包,可以参考我的解决思路,如下: https://pkgs.org/这 ...
- PDF格式的“在线阅读”和“下载”
产生背景: 一个需求,用户可在线阅读PDF,也可下载到本地.听需求来源说人家的网站上的可以做,问我们能做吗,需要这个功能,就要来了网址,看看页面. 问题:上传PDF文件后,发现访问地址在浏览器上打开, ...
- Linux 为linux enterprises 6安装图形桌面教程
为linux enterprises 6安装图形桌面教程 by:授客 QQ:1033553122 安装系统后发现没图形界面,安装Xwindow[为了避免权限不足,以root登录] 步骤1.启动图形界面 ...
- 反编译Apk得到Java源代码
原文章转载自:http://hi.baidu.com/%CB%BF%D4%B5%CC%EC%CF%C2/blog/item/2284e2debafc541e495403ec.html 本人转载自:ht ...
- Socks5 RFC1928协议中文版
除了这个意译版rfc1928外,其他人写的好像也有错误,都是一知半解. ☆ RFC 1928意译版(非直译版) http://www.ietf.org/rfc/rfc1928.txt http://w ...
- [20180730]exadata与行链接.txt
[20180730]exadata与行链接.txt --//最近一段时间在看<expert oracle exadata>,智能扫描的三大优化方法是:字段投影,谓词过滤,存储索引.大多数智 ...