admin管理员组文章数量:1794759
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 ..www.runoob/jsref/event-onmouseover.html
①解释onmouseover 事件表示当鼠标移动到指定的元素上时发生。
②具体语法在需要使用onmouseover事件的元素标签内书写onmouseover = 'js方法名称'
3.onmouseout事件onmouseout 事件 | 菜鸟教程onmouseout 事件 事件对象 实例 在鼠标指针移出指定的对象时执行Javascript代码: <img οnmοuseοut='normalImg(this)' src='smiley.gif' alt='Smiley'> 尝试一下 » 定义和用法 onmouseout 事件会在鼠标指针移出指定的对象时发生。 语法 HTML..www.runoob/jsref/event-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相册 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969008a123630.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论