HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

    background: url(../img/s3.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateY(90deg) translateZ(200px);
}.box .box1 .left {background: url(../img/s4.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateY(-90deg) translateZ(200px);
}.box .box1 .top {background: url(../img/s5.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateX(90deg) translateZ(200px);
}.box .box1 .bottom {background: url(../img/s6.jpg);background-size: 100% 100%;opacity: 0.8;transform: rotateX(-90deg) translateZ(200px);
}/*����Ч��*/.box .box1:hover .font {background: url(../img/s1.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: translateZ(400px);
}.box .box1:hover .back {background: url(../img/s2.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: translateZ(-400px) rotateY(180deg);
}.box .box1:hover .right {background: url(../img/s3.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: rotateY(90deg) translateZ(400px);
}.box .box1:hover .left {background: url(../img/s4.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: rotateY(-90deg) translateZ(400px);
}.box .box1:hover .top {background: url(../img/s5.jpg);background-size: 100% 100%;opacity: 0.4;transition-duration: 1s;transform: rotateX(90deg) translateZ(400px);
}

HTML代码 :

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>英雄联盟</title><link rel="stylesheet" type="text/css" href="css/style.css">
</head><body><audio class="audio-player" id="video1" autoplay muted loop><source src="881840.ogg" type="audio/mpeg"></audio><div class="box"><div class="box1"><div class="font"></div><div class="back"></div><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><i class="i-font"></i><i class="i-back"></i><i class="i-top"></i><i class="i-bottom"></i><i class="i-left"></i><i class="i-right"></i> </div></div><script>document.body.addEventListener('mousedown', function() {var video1 = document.getElementById("video1")video1.muted = false;video1.load();video1.play();}, false);</script></body></html>

源码获取

查看博主主页或私信博主获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 40 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️相关推荐

HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️
效果演示: 代码目录: 主要代码实现: CSS样式: *, *::after, *::before {box-sizing: border-box; }html {background: #fff; ...
HTML+CSS+JS实现 ❤️3D洞穴无限延伸动画特效❤️
使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
html让图片一直旋转,css如何设置不停旋转的图片？
css如何设置不停旋转的图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何设置不停旋转的图片? 这个效果实现起来其实并不困难,代码清单如下: ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
html5手机手风琴相册,纯js带弹性动画的手风琴图片相册特效
这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效.该手风琴图片相册在鼠标滑过时,相应的图片会水平展开,而图片的说明文字则会垂直滑动上来,形成一些视觉差的感觉. 使用方法在页面 ...
HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️
效果演示: 文末获取源码代码目录: 主要代码实现: HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
HTML+CSS+JS实现 ❤️ 立方体旋转图片切换特效❤️
效果演示: 代码目录: 主要代码实现: css样式: /*Full-page view:https://codepen.io/GeorgePark/full/gegavO/*/@import url( ...
JS实现3D旋转图片
想将图片3D旋转展示出来,如下图所示要想3D展示,需要在样式中设置 transform-style属性为preserve-3d,根据图片的数量计算旋转度数,给每一张图片设置上旋转角度,使图片展开围成 ...
3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...

HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️

效果演示：

代码目录：

主要代码实现：

部分CSS样式：

HTML代码 :

源码获取

HTML5大作业实战100套

HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️相关推荐

最新文章

热门文章