实现图片旋转木马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立 ...
随机推荐
- 弱引用(WeakReference)
在应用程序代码内实例化一个类或结构时,只要有代码引用它,就会形成强引用.这意味着垃圾回收器不会清理这样的对象使用的内存.但是如果当这个对象很大,并且不经常访问时,此时可以创建对象的弱引用,弱引用允许创 ...
- Yapi学习笔记
. 下载源码:https://github.com/YMFE/yapi 2. 安装MongoDB数据库,下载地址:链接:https://pan.baidu.com/s/1bZKlcy 密码:ah3n ...
- (1)Jquery1.8.3快速入门_helloworld
jquery 快速入门 学习记录 1.第一个jquery程序 helloworld: 需要导入Jquery1.8.3的库 ,下载地址: jQuery1.8.3 代码令另存到本地 保存为jquery ...
- 【RabbitMQ】8、RabbitMQ之mandatory和immediate
1. 概述 mandatory和immediate是AMQP协议中basic.publish方法中的两个标识位,它们都有当消息传递过程中不可达目的地时将消息返回给生产者的功能.对于刚开始接触Rabbi ...
- 关于模板引擎handlebars.js基本用法
说明:模板引擎主要针对于渲染DOM,取代了字符串拼接,用下面的代码亲测handlebars模板引擎比字符串拼接渲染DOM慢了20ms, 这里配置一个在线DEMO,简单说明下handlebars.js的 ...
- SVN多分支开发模式V1.0.1
1目的 规范开发模式过程,指导项目研发.质控测试.DevOps的相关活动. 2适用范围 本规范的作用范围是为互联网软件产品相关项目开发模式的管理过程. (1) 对项目团队中研发人员在开发模式过程中 ...
- centos7学习笔记-安装后的一些配置
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.允许普通用户使用sudo root用户下运行 visudo 在root ALL=(ALL)ALL下面添加 username ...
- Windows下判断jdk是否安装好以及环境变量是否配置好
cmd下执行: 1.java 2.javac 3.where java 如果三个都没问题,说明安装成功&环境变量配置成功
- 元素的class和id问题
一个元素有且只能有1个id,且全文中此id只能出现在一个元素上 一个元素不能写多次class,比如 <div class="a" class="b"& ...
- 关于CSS的一些基础内容
最近用到了CSS,刚好学学.CSS(Cascading Style Sheet)中文名层叠样式表,用于为html文档添加样式控制,也是一种计算机语言. 一.CSS语法a)CSS规则由选择器和声明组成, ...