抖音上超火的3D立体动态相册表白特效（29）

制作成下面这种效果：

鼠标经过时会展开十分好看！换成你和情人的图片，可以放十几张不同的图片也可以只放一种图片！

文件放置部分：

css代码部分：

html{background:url(../img/2.GIF) ;height: 100%;
}
/*最外层容器样式*/
.wrap{position: relative;position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 200px;height: 200px;margin: auto;/*改变左右上下,图片方块移动*/}
/*包裹所有容器样式*/
.cube{width: 200px;height: 200px;margin: 0 auto;transform-style: preserve-3d;transform: rotateX(-30deg) rotateY(-80deg);-webkit-animation: rotate 20s infinite;/*匀速*/animation-timing-function: linear;
}
@-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: bloack;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);
}

html结构代码部分：


<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>photo-3d</title><link rel="stylesheet" href="css/index.css" /></head><body><!--/*外层最大容器*/--><div class="wrap"><!--    /*包裹所有元素的容器*/--><div class="cube"><!--前面图片 --><div class="out_front"><img src="img/1.jpg"  class="pic"/></div><!--后面图片 --><div class="out_back"><img src="img/1.jpg"  class="pic"/></div><!--左图片 --><div class="out_left"><img src="img/1.jpg"  class="pic"/></div><div class="out_right"><img src="img/1.jpg"  class="pic"/></div><div class="out_top"><img src="img/1.jpg"  class="pic"/></div><div class="out_bottom"><img src="img/1.jpg"  class="pic"/></div><!--小正方体 --> <span class="in_front"><img src="img/1.jpg" class="in_pic" /></span><span class="in_back"><img src="img/1.jpg" class="in_pic" /></span><span class="in_left"><img src="img/1.jpg" class="in_pic" /></span><span class="in_right"><img src="img/1.jpg" class="in_pic" /></span><span class="in_top"><img src="img/1.jpg" class="in_pic" /></span><span class="in_bottom"><img src="img/1.jpg" class="in_pic" /></span></div></div></body>
</html>

抖音上超火的3D立体动态相册表白特效（29）相关推荐

花了30分钟,给女朋友们写了个最近抖音很火的3D立体动态相册
鉴于蛮多人私信我问我要源码的(虽然源码我就贴在下面,无奈摊手.jpg), 我想可能是他们想知道这个东西是怎么写的,所以我还是把思路写出来吧我们先看效果效果代码 <!doctype html ...
抖音上很火的3D立体动态相册
带背景音乐网站效果: http://www.fengzhao.icu/photos/html/%E6%8A%96%E9%9F%B3%E4%B8%8A%E5%BE%88%E7%81%AB%E7%9A%8 ...
java3d翻转纪念相册_抖音上很火的3D立体动态相册实现代码!
前言: 圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧!先上效果图,来引起下你们的兴趣. ...
抖音3d相册html代码,抖音上很火的3D立体动态相册.html
纯CSS实现鼠标经过3D立体动态展示图片特效代码 *{ margin:0; padding:0; } body{ max-width: 100%; min-width: 100%; height: 1 ...
怎么用java做一个立体相册_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
编程制作动态壁纸的思路_抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)...
现在开始说说制作过程: 一.创建文件夹 1.在桌面建一个文件夹,命名随意 2.在文件夹里创建一个文件名为index.html的文件 3.在文件夹里创建两个文件名分别为img.css的文件夹 4.在cs ...
抖音上很火的3D立体动态相册代码制作教程
直接来正文直接来干货先创建一个html文件 <!DOCTYPE html> <html lang="en"> <head> <meta ...
动态壁纸安卓_抖音上超火的时间轮盘动态壁纸，安卓苹果都可以设置！个性好看...
今天给大家分享一个最近很火的时间轮盘带姓氏的壁纸效果呢就像我们现在看到的这样看起来呢有点像古墓的感觉同时我们常见的带姓氏的壁纸我也已经给大家准备好了制作呢也非常的简单我们只需要在微信的搜索页 ...
超简单：很火的3D立体动态相册，送给心爱的那个人
1.首先,我们一共需要三个文件,目录关系如下所示.先建index.html文件吧,电脑上先创建一个.txt文件,在里面加入代码后保存,重命名为index.html(记得把原来的.txt后缀覆盖).ht ...

抖音上超火的3D立体动态相册表白特效（29）

抖音上超火的3D立体动态相册表白特效（29）相关推荐

最新文章

热门文章