Tauily的gravatar头像
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

是否原创(转载必填原文地址)

原创

项目截图(必填)

js实现3D酷炫魔方图片展示js实现3D酷炫魔方图片展示

运行截图(必填)

js实现3D酷炫魔方图片展示

注意事项

暂无


打赏

文件名: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
最代码最近下载分享源代码列表最近下载
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日
最代码最近浏览分享源代码列表最近浏览
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日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友