HTML5、css3、js实现3D相册
目录
想法
实现
一、基础知识
1.3D转换 transform-style: preserve-3d;
①简述
②使用
③3D转换方法
2.onmouseover 事件
①解释
②具体语法
3.onmouseout事件
①解释
②具体语法
**本例通过在div的class中设置相同的类名，然后在js方法中通过document.getElementsByClassName("类名")[在相同类名中排第几个，从0开始计数].style.transform，来依次修改每个正方形的3D效果，以此来达到鼠标悬停时效果的改变。
二、代码实现
**这是我的文件目录，直接使用代码的话注意修改目录啊
想法
这个3D相册大概就是：里面一个立方体，外面一个立方体，当鼠标悬停在外面的立方体时，外面的立方体会做出相应的改变。有了想法接下来就是想实现的方法了。
实现
立方体可以通过css3里面的3D转换来实现；鼠标悬停可以通过多种方式来实现：hover、onmouseover等，由于此处需要当鼠标悬停在一个面上时整个立方体都要做出样式的修改，故我使用了onmouseover在js中对立方体的每个面都进行修改。
一、基础知识
1.3D转换 transform-style: preserve-3d;
①简述
与我们知道的3D一样，css3中的3D效果也是对立体空间的设置，即包括x轴、y轴、z轴的三个方向上的设置（包括位移、旋转和缩放等），具体使用如下：
②使用
**在使用3D转换之前我们需要先将其转换为3D元素：transform-style: preserve-3d;然后就是对每个面进行相应的旋转和位移了。
在本例中，此处具体讲解立方体的绘制方法：
假定正方体的每个面的小正方形的长宽为100px，我们在可以创建六个div，这六个div分别是上下、左右、前后。6个div创建之后会以二维的形式叠加在一起，因此你此处只能看到一个正方形，但实际是由有6个的只是叠加在了一起。我们需要对这些正方形转换成3D元素：transform-style: preserve-3d; 然后对各个面的正方形进行样式处理，对于上面的正方形：沿x轴旋转-90度，沿z轴平移50px；对于下面的正方形：沿x轴旋转90度，沿z轴平移50px；对于左边的正方形：沿y轴旋转90度，沿z轴旋转50px；对于右面：沿y轴旋转-90度，沿z轴旋转-50px；对于前面：只用沿z轴平移50px；对于后面：也只用沿z轴平移-50px。
对正方体的绘制方法并不唯一，此处只是我使用的方法。
③3D转换方法
这里有本例中使用的一些3D转换方法：
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) |
定义 3D 转化，仅使用用于 Z 轴的值。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转 |
其他更多的见：
CSS3 3D 转换 | 菜鸟教程
CSS 3D 转换
**啊对，还需要在这个6个div的父级里面增加一个perspective属性：perspective属性设置从多远的地方查看一个元素，这里的值越大表示眼睛距离这个元素越远。这里本人建议值设大一点，因为值越大代表你看到的这个元素就越远，3D视角的影响较小。
2.onmouseover 事件
onmouseover 事件 | 菜鸟教程onmouseover 事件 事件对象 实例 鼠标指针移动到图片后执行Javascript代码： <img οnmοuseοver='bigImg(this)' src='smiley.gif' alt='Smiley'> 尝试一下 » 定义和用法 onmouseover 事件会在鼠标指针移动到指定的元素上时发生。 语法 HTML ..
①解释
onmouseover 事件表示当鼠标移动到指定的元素上时发生。
②具体语法
在需要使用onmouseover事件的元素标签内书写onmouseover = 'js方法名称'
3.onmouseout事件
onmouseout 事件 | 菜鸟教程onmouseout 事件 事件对象 实例 在鼠标指针移出指定的对象时执行Javascript代码: <img οnmοuseοut='normalImg(this)' src='smiley.gif' alt='Smiley'> 尝试一下 » 定义和用法 onmouseout 事件会在鼠标指针移出指定的对象时发生。 语法 HTML..
①解释
onmouseout事件表示当鼠标移出指定的元素时发生。
②具体语法
在需要使用onmouseout事件的元素内书写onmouseout = ‘js方法名称’
**本例通过在div的class中设置相同的类名，然后在js方法中通过document.getElementsByClassName("类名")[在相同类名中排第几个，从0开始计数].style.transform，来依次修改每个正方形的3D效果，以此来达到鼠标悬停时效果的改变。
二、代码实现
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>相册</title><style type="text/css">*{margin: 0;padding: 0;}#contain{height: 300px;width: 300px;margin: 400px auto;perspective: 200000px;transform-style: preserve-3d;transform: rotateX(00deg) rotateY(0deg);/* animation: rotate 10s linear infinite 0s; */}.in{width: 300px;height: 300px;position: absolute;transform-style: preserve-3d;background-size: 100% 100%;}.in-top{background-color: aqua;background-image: url(img/imgs0.jpg);transform: rotateX(-90deg) translateZ(-150px);}.in-bottom{/* background-color: red; */background-image: url(img/imgs1.jpg);transform: rotateX(90deg) translateZ(-150px);}.in-left{/* background-color: blue; */background-image: url(img/imgs2.jpg);transform: rotateY(90deg) translateZ(-150px);}.in-right{/* background-color: yellow; */background-image: url(img/imgs3.jpg);transform: rotateY(-90deg) translateZ(-150px);}.in-before{/* background-color: salmon; */background-image: url(img/imgs4.jpg);transform: translateZ(150px);}.in-after{/* background-color: blueviolet; */background-image: url(img/imgs5.jpg);transform: translateZ(-150px);}.out{width: 500px;height: 500px;position: absolute;transform-style: preserve-3d;background-size: 100% 100%;opacity: 0.4;transition:transform 1s;}.out-top{/* background-color: aqua; */background-image: url(img/imgs6.jpg);transform: rotateX(-90deg) translateZ(-350px) translateX(-100px);}.out-bottom{/* background-color: red; */background-image: url(img/imgs7.jpg);transform: rotateX(90deg) translateZ(-150px) translateX(-100px);}.out-left{/* background-color: blue; */background-image: url(img/imgs8.jpg);transform: rotateY(90deg) translateZ(-350px) translateY(-100px);}.out-right{/* background-color: yellow; */background-image: url(img/imgs9.jpg);transform: rotateY(-90deg) translateZ(-150px) translateY(-100px);}.out-before{/* background-color: salmon; */background-image: url(img/imgs10.jpg);transform: translateZ(250px) translateX(-100px) translateY(-100px);}.out-after{/* background-color: blueviolet; */background-image: url(img/imgs11.jpg);transform: translateZ(-250px) translateX(-100px) translateY(-100px);}@keyframes rotate{0%{transform: rotateX(0deg) rotateY(0deg);}100%{transform: rotateX(360deg) rotateY(720deg);}}</style></head><body><!-- <audio autoplay controls="controls"><source src="music/bgmusic.mp3" type="audio/mp3" /></audio> --><audio autoplay="true" controls="controls" preload="auto"><source src="music/bgmusic.mp3" type="audio/mp3"></audio><!-- <embed src="music/bgmusic.mp3" hidden="true" autostart="true"></embed> --><div id="contain"><div class="in-top in">1</div><div class="in-bottom in">2</div><div class="in-left in">3</div><div class="in-right in">4</div><div class="in-before in">5</div><div class="in-after in">6</div><div class="out-top out" onmouseover="mouseIn()" onmouseout="mouseOut()">7</div><div class="out-bottom out" onmouseover="mouseIn()" onmouseout="mouseOut()">8</div><div class="out-left out" onmouseover="mouseIn()" onmouseout="mouseOut()">9</div><div class="out-before out" onmouseover="mouseIn()" onmouseout="mouseOut()">11</div><div class="out-right out" onmouseover="mouseIn()" onmouseout="mouseOut()">10</div><div class="out-after out" onmouseover="mouseIn()" onmouseout="mouseOut()">12</div><script type="text/javascript">function mouseIn(){for(var i = 0 ; i < 6 ; i++){document.getElementsByClassName("out")[i].style.opacity = "0.8"}document.getElementsByClassName("out")[0].style.transform = "rotateX(-90deg) translateZ(-" + 550 + "px) translateX(-100px)"document.getElementsByClassName("out")[1].style.transform = "rotateX(90deg) translateZ(-" + 350 + "px) translateX(-100px)"document.getElementsByClassName("out")[2].style.transform = "rotateY(90deg) translateZ(-" + 550 + "px) translateY(-100px)"document.getElementsByClassName("out")[4].style.transform = "rotateY(-90deg) translateZ(-" + 350 + "px) translateY(-100px)"document.getElementsByClassName("out")[3].style.transform = "translateZ(" + 450 + "px) translateX(-100px) translateY(-100px)"document.getElementsByClassName("out")[5].style.transform = "translateZ(-" + 450 + "px) translateX(-100px) translateY(-100px)"}function mouseOut(){for(var i = 0 ; i < 6 ; i++){document.getElementsByClassName("out")[i].style.opacity = "0.4"}document.getElementsByClassName("out")[0].style.transform = "rotateX(-90deg) translateZ(-350px) translateX(-100px)"document.getElementsByClassName("out")[1].style.transform = "rotateX(90deg) translateZ(-150px) translateX(-100px)"document.getElementsByClassName("out")[2].style.transform = "rotateY(90deg) translateZ(-350px) translateY(-100px)"document.getElementsByClassName("out")[4].style.transform = "rotateY(-90deg) translateZ(-150px) translateY(-100px)"document.getElementsByClassName("out")[3].style.transform = "translateZ(250px) translateX(-100px) translateY(-100px)"document.getElementsByClassName("out")[5].style.transform = "translateZ(-250px) translateX(-100px) translateY(-100px)"}</script><!-- 这个3和4为啥要交换一下啊，如果不交换的话3、4鼠标悬停后的效果是反的 --></div></body>
</html>
**这是我的文件目录，直接使用代码的话注意修改目录啊
HTML5、css3、js实现3D相册相关推荐
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
- ❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）
生日快乐网站模板HTML(精品制作)(HTML5+CSS3+JS) 最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网 ...
- HTML5,CSS3,js
HTML5,CSS3,js html5 html基本结构 块级标签和行级标签 html5表格 html5表单 css3 css使用方法 css常用属性 css3的过渡和变换 css3的动画属性和多列属 ...
- 七夕静态页面html,html5+CSS3+JS实现七夕言情功能代码
因为今天8月28日就是中国的情人节-七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心:制作了h5+css+js界面祝小伙伴们:七夕快乐 具体的功能有: 1.下雪的背景动画 2.下面的 ...
- python3d相册源代码_js和CSS3炫酷3D相册展示
js和CSS3炫酷3D相册展示 *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overfl ...
- 使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧 效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
- 利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟 利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习 效果图: 在线效果预览 思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...
- HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
- Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介 二.系统设计 三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计 四.总结 五.源码下载 一.系统简介 该Web ...
最新文章
- linux 驱动程序 HelloWorld
- QQ在线客服代码，飘浮在右侧的QQ客服js特效演示
- 【学习笔记】FI-AR模块概述
- linux调用qt生成静态库文件下载,Centos7下编译openssl静态库与QT引用
- html中padding和margin的区别和用法与存在的bug消除
- HDU 4651 数论 partition 求自然数的拆分数
- ppython_Python pcom包_程序模块 - PyPI - Python中文网
- 表单的ajax填入问题
- php-fpm 的参数,php-fpm启动参数配置详解
- The constructor someMethod() is not accessible due to restriction on required library
- CentOS 7.X配置连接网络
- 前端上传视频至阿里云并转码
- 暑期开箱评测Wifi Pineapple（大菠萝）
- Foundation框架 之 常见结构体、包装数据、日期
- javascript 日期计算器 推算几天后的日期 计算日期差
- Python 打字小游戏开发，来体验不一样的打字游戏乐趣（第一篇）
- 怎么把静态图片做成动态图？简单三步让图片动起来
- 教你如何将你的Qt项目打包安装在MeeGo系统中
- video标签在iOS上无法播放解决思路及办法
- android 打开微信好友动态图片,Android GridView仿微信朋友圈显示图片