想不想做一个3D魔方，把儿子的照片放进去，外面是你，里面是他。本人从业至今，自诩是动画机器人，苦心钻研各种动画，精通CSS3、Canvas等，不管你要做什么，关注我一个人就够了，跟我一起把代码写活。
一定要先做下广告，希望大家浏览博客的同时，可以点一下我的置顶博文。本人入驻一年，作品都是开源，没有任何一篇博客要求付费可读，并及时回复各种疑难问题，我不需要大家给我任何的经济援助，你的鼓励才是我发表博文最大的动力。 如果你觉得我的代码还算有趣，在你的学习中能有所帮助，请查看我的置顶文章，我由衷感谢！ 前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？
不说了，上源码：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>亲子相册</title> <style> html,body{ width: 100%; height: 100%; margin:0; background: url(https://i02piccdn.sogoucdn.com/73750308f69893a3); background-repeat:repeat; } .box{ width: 100%; height: 400px; position: absolute; top: 19%; transform: rotateY(45deg) rotateX(-20deg); transform-style: preserve-3d; } .box:first-child{ left:24%; } .box:last-child{ right:24%; } /*里面的盒子*/ .box> .in{ width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 50%; /*开启3d*/ transform-style: preserve-3d; transform: translate(-50%,-50%) rotateY(45deg) rotateX(-20deg); /*调用动画*/ animation: mofan 5s linear 0s infinite normal; z-index: 100; } /*里面盒子六个面的共同值*/ .box> .in>div{ width: 100px; height: 100px; position: absolute; opacity: 0.7; border: 1px solid white; } /*里面盒子的六个面*/ /*前*/ .n1{ background-color: #00ffff; transform:translateZ(51px); } /*后*/ .n2{ background-color: black; transform: translateZ(-51px); } /*左*/ .n3{ background-color: black; transform: translateX(-51px) rotateY(90deg); } /*右*/ .n4{ background-color: #00ffff; transform: translateX(51px) rotateY(90deg); } /*上*/ .n5{ background-color: #00ffff; transform: translateY(-51px) rotateX(90deg); } /*下*/ .n6{ background-color: black; transform: translateY(51px) rotateX(90deg); } /*里面盒子的六个面结束*/ /*动画*/ @keyframes mofan{ from{ transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ; } to{ transform: translate(-50%,-50%) rotateY(360deg) rotateX(0deg); } } @keyframes nixuan{ from{ transform: translate(-50%,-50%) rotateY(0deg) rotateX(0deg) ; } to{ transform: translate(-50%,-50%) rotateY(-360deg) rotateX(0deg); } } /*外面的盒子*/ .box>.out{ width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translate(-50%,-50%) ; /*调用动画*/ animation: mofan 5s linear 0s infinite normal; color: white; } .box>.out>.t1,.t2,.t3,.t4,.t5,.t6{ width: 200px; height: 200px; position: absolute; opacity: 0.5; border: 1px solid white; transition: all .3s; } /*前*/ .t1{ background-color: #92C7DC; transform:translateZ(100px); } .t1>img{height:100%} /*后*/ .t2{ background-color: #92C7DC; transform: translateZ(-100px); } /*左*/ .t3{ background-color: #92C7DC; transform: translateX(-100px) rotateY(90deg); } /*右*/ .t4{ background-color: #92C7DC; transform: translateX(100px) rotateY(90deg); } /*上*/ .t5{ background-color: #92C7DC; transform: translateY(-100px) rotateX(90deg); } /*下*/ .t6{ background-color: #92C7DC; transform: translateY(100px) rotateX(90deg); } .box:hover>.out>.t1{ transform: translateZ(300px); } .box:hover>.out>.t2{ transform: translateZ(-300px); } .box:hover>.out>.t3{ transform: translateX(-300px) rotateY(90deg); } .box:hover>.out>.t4{ transform: translateX(300px) rotateY(90deg); } .box:hover>.out>.t5{ transform: translateY(-300px) rotateX(90deg); } .box:hover>.out>.t6{ transform: translateY(300px) rotateX(90deg); } /*鼠标悬浮时外盒子逆转*/ .box:hover>.out{ animation: nixuan 5s linear 0s infinite normal; } .n1,.n4,.n5{ background-image: linear-gradient(to right,#00ffff,black) } .k1{ width: 29.3px; height: 29.3px; border: 2px solid white; float: left; border-radius: 2px; } </style> </head> <body> <div class="box"> <div class="in"> <div class="n1"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n2"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n3"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n4"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n5"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n6"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> </div> <div class="out"> <div class="t1"><img src="https://img-blog.csdnimg.cn/2020090116353966.png#pic_center" alt=""></div> <div class="t2"></div> <div class="t3"></div> <div class="t4"></div> <div class="t5"></div> <div class="t6"></div> </div> </div> <div class="box"> <div class="in"> <div class="n1"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n2"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n3"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n4"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n5"> <div class="k1"><img src="https://img-blog.csdnimg.cn/20200901163533997.png#pic_center" alt=""></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> <div class="n6"> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> <div class="k1"></div> </div> </div> <div class="out"> <div class="t1"></div> <div class="t2"></div> <div class="t3"></div> <div class="t4"></div> <div class="t5"></div> <div class="t6"></div> </div> </div> </body> </html>文章主题部分已标明注释，毕竟是CSS页面，大批量的注释没有太多意义，如果在动画方面有些许疑问，可以评论在下方，或单独私信我，也可以浏览“ 这篇 ” 文章。
本人已入驻近两年，所有作品都是开源，也从未在文章上设置“粉丝可读、VIP可读、付费可读”，但一直没有什么人气。希望路过的你可以阅读一下其它文章，万分感激。
推荐阅读： CSS小鲨鱼JS迷你键盘 龙珠
