Tauily
2018-12-11 22:42:47
原
js实现3D酷炫魔方图片展示
项目描述
做的是一个很简单的3D魔方的方式旋转展示图片,这是我最近在慕课网上向老师学的,感觉还不错,做出来的动态效果还不错。
此代码可以把Img里的图片替换成自己的图片,图片的名称不能改变,它的定义与代码中background-image:url(img/a"+n+".png);有关,以及在style里面做的样式。
style中先定义好六个面的方位,通过transform: translateY(-150px) rotateX(90deg);进行定义
用JavaScript来设置图片分块效果,最后在style中
.box-page div:nth-child(1){
animation: a1 4.5s ease-in;
}
设置图片飞出去的效果。
运行环境
HBuilder
项目技术(必填)
html+javaScript
是否原创(转载必填原文地址)
原创
项目截图(必填)
运行截图(必填)
注意事项
暂无
猜你喜欢
请下载代码后再发表评论
文件名:cube.zip,文件大小:7236.19K
下载
- /
- /cube
- /cube/cube.html
- /cube/img
- /cube/img/a0.png
- /cube/img/a1.png
- /cube/img/a2.png
- /cube/img/a3.png
- /cube/img/a4.png
- /cube/img/a5.png
- /cube
![最代码相关代码源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
![最代码最近下载分享源代码列表](https://static.zuidaima.com/resource/img/heart_ico.png)
jumanjihu LV1
2022年5月3日
xkyssb LV12
2022年4月1日
1657916866 LV1
2021年9月26日
yyy1996 LV1
2021年8月9日
ZhangWeiChong LV2
2021年6月27日
别碰我被窝 LV9
2021年6月18日
13293117576 LV1
2021年2月4日
492603365 LV1
2021年1月22日
2521436308 LV10
2021年1月10日
lxddvcfs LV6
2020年12月19日
![最代码最近浏览分享源代码列表](https://static.zuidaima.com/resource/img/cattle_ico.png)
t666666
2023年10月28日
暂无贡献等级
1599639642 LV3
2023年6月19日
654651 LV4
2023年3月4日
wangliyang LV5
2023年3月2日
zccmp20 LV22
2022年9月2日
话不多的程序员 LV18
2022年8月29日
cciccc LV2
2022年8月23日
jumanjihu LV1
2022年5月3日
Wyzabc
2022年5月2日
暂无贡献等级
xiaohaoyyds LV1
2022年5月1日