硬核照片显示，魔方即视感

话不多说，先上效果：

效果：能够自定义魔方上的八张照片，魔方大小位置以及背景图，鼠标悬浮魔方上方，魔方会有打开效果，是不是很酷炫。

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>/*主页面背景图片*/body{background-image: url(img/3.jpg);}/*最外层容器样式*/.wrap {width: 200px;height: 200px;margin: 200px;position: relative;}/*包裹所有容器样式*/.cube {width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);animation: rotate linear 20s infinite;}@-webkit-keyframes rotate {from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}.cube div {position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: all .4s;}/*定义所有图片样式*/.pic {width: 200px;height: 200px;}.cube .out_front {transform: rotateY(0deg) translateZ(100px);}.cube .out_back {transform: translateZ(-100px) rotateY(180deg);}.cube .out_left {transform: rotateY(-90deg) translateZ(100px);}.cube .out_right {transform: rotateY(90deg) translateZ(100px);}.cube .out_top {transform: rotateX(90deg) translateZ(100px);}.cube .out_bottom {transform: rotateX(-90deg) translateZ(100px);}/*定义小正方体样式*/.cube span {display: block;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}.cube .in_pic {width: 100px;height: 100px;}.cube .in_front {transform: rotateY(0deg) translateZ(50px);}.cube .in_back {transform: translateZ(-50px) rotateY(180deg);}.cube .in_left {transform: rotateY(-90deg) translateZ(50px);}.cube .in_right {transform: rotateY(90deg) translateZ(50px);}.cube .in_top {transform: rotateX(90deg) translateZ(50px);}.cube .in_bottom {transform: rotateX(-90deg) translateZ(50px);}/*鼠标移入后样式*/.cube:hover .out_front {transform: rotateY(0deg) translateZ(200px);}.cube:hover .out_back {transform: translateZ(-200px) rotateY(180deg);}.cube:hover .out_left {transform: rotateY(-90deg) translateZ(200px);}.cube:hover .out_right {transform: rotateY(90deg) translateZ(200px);}.cube:hover .out_top {transform: rotateX(90deg) translateZ(200px);}.cube:hover .out_bottom {transform: rotateX(-90deg) translateZ(200px);}</style>
</head><body><!-- 外层最大容器 --><div class="wrap"><!--包裹所有元素的容器--><div class="cube"><!--前面图片 --><div class="out_front"><img src="img/2.jpg" class="pic" /></div><!--后面图片 --><div class="out_back"><img src="img/20141129042645682.jpg.source.jpg" class="pic" /></div><!--左面图片 --><div class="out_left"><img src="img/20141202023701441.jpg.source.jpg" class="pic" /></div><!--右面图片 --><div class="out_right"><img src="img/20141202023704566.jpg.source.jpg" class="pic" /></div><!--上面图片 --><div class="out_top"><img src="img/3.jpg" class="pic" /></div><!--下面图片 --><div class="out_bottom"><img src="img/kobe_bryant.jpg" class="pic" /></div><!--小正方体 --><span class="in_front"><img src="img/2.jpg" class="in_pic" /></span><span class="in_back"><img src="img/20141129042645682.jpg.source.jpg" class="in_pic" /></span><span class="in_left"><img src="img/20141202023701441.jpg.source.jpg" class="in_pic" /></span><span class="in_right"><img src="img/20141202023704566.jpg.source.jpg" class="in_pic" /></span><span class="in_top"><img src="img/3.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/kobe_bryant.jpg" class="in_pic" /></span></div></div>
</body></html>

Ctrl+C，直接拿去用吧

好了，分享就到这里，我还要继续未完成的代码。

日拱一卒，得寸进尺。

硬核照片显示，魔方即视感相关推荐

北京冬奥黑科技; 揭秘虎年春晚硬核科技;全球首款AR隐形眼镜问世;索尼3D显示技术路径曝光...
点击文章内容即可跳转至相应原文阅读 >> 祝大家开工大吉,虎年顺利! 北京冬奥从开幕式就黑科技曝了! 这一次的北京冬奥会,从开幕式就直接火了!首先是从冰立方中破冰而出并随着音乐冉冉升起的奥 ...
3 万字 51 张图教你 CPU、内存、操作系统硬核知识！
作者|cxuan 来源 |Java建设者(ID:javajianshe) 我们每个程序员或许都有一个梦,那就是成为大牛,我们或许都沉浸在各种框架中,以为框架就是一切,以为应用层才是最重要的,你错了.在 ...
【NAS备份】摆脱丢数据的噩梦，群晖备份硬核实战教程分享
前言大家好,我是村雨Mura,本期来聊一聊我是如何用 NAS 轻松.完整地备份自己数据的. 首先,硬件再好不如备份即便从小的线材到硬盘的质量都用最好的,也很难保证不丢数据,宇宙射线.硬盘不可逆衰减 ...
硬核知识大全作为程序员你不得不了解
我们每个程序员或许都有一个梦,那就是成为大牛,我们或许都沉浸在各种框架中,以为框架就是一切,以为应用层才是最重要的,你错了.在当今计算机行业中,会应用是基本素质,如果你懂其原理才能让你在行业中走的更远 ...
【硬核摄影2.0】用线性CCD器件制作扫描相机
本文参考资料: [1] (Strongly Recommend!) Fundamentals and Experiments of Line Scan Camera: http://www.elm-c ...
Lattice CrosslinkNx LIFCL-40应用连载5：如何使用MIPI D-PHY硬核IP
作者:Hello,Panda 一.目标配置CMOS Sensor OV9734,并通过MIPI DPHY硬核接收数据. 使用一个RISC-V软核,实通过AHB总线访问I2C FIFO,通过I2C总线 ...
程序员不得不了解的硬核知识大全！
我们每个程序员或许都有一个梦,那就是成为大牛,我们或许都沉浸在各种框架中,以为框架就是一切,以为应用层才是最重要的,你错了.在当今计算机行业中,会应用是基本素质,如果你懂其原理才能让你在行业中走的更远 ...
硬核浪漫！全球独有主动闪烁的卫星，用摩斯电码在七夕天空搭起一座“鹊桥”...
大数据文摘作品作者:Mickey "全宇宙为你闪耀." <三体>中的硬核剧情,在七夕这天,被中国的硬核工程师浪漫复刻了一把. 2021年七夕节当天,有网友在北京夜空观 ...
Z6 Pro、拯救者演绎硬核实力，联想诠释生而向上
4月23日,联想在北京举行主题为"硬核实力生而向上"的2019春季新品发布会.数百名粉丝.媒体记者齐聚北京联想全球总部,共同见证联想新品问世. 发布会不仅发布了从预热期起就以HY ...

硬核照片显示，魔方即视感

硬核照片显示，魔方即视感相关推荐

最新文章

热门文章