前端特效之520表白神器-旋转照片墙

作者 : OO资源中心 发布时间: 2020-05-10 文章热度:776 共2757个字,阅读需7分钟。 本文内容有更新 字体:

520马上到了,教大家一手表白神器,单身的程序员们感觉学起来,很简单。

制作步骤:

1. 新建代码目录,新建文件index.html,将以下代码拷贝到文件中

2. 新建文件夹image,找12张图片放进去,修改imgae标签对应的src属性,酷炫的照片旋转就完成了。

3. 代码效果如下,双击index.html或者直接拖到浏览器中打开即可

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>520表白神器-照片特效</title>

<style>

*{

padding:0;

margin:0;

}

#react{

width: 200px;

height:200px;

margin: 200px auto;

transform-style:preserve-3d;

animation:rotate 20s infinite;

animation-timing-function: linear;

}

#react div{

position:absolute;

transition: all .4s;

}

div .out_pic{

width:200px;

height:200px;

opacity:0.9;

}

div .in_pic{

width:100px;

height:100px;

}

#react span{

display:block;

position:absolute;

width:100px;

height:100px;

top:50px;

left:50px;

}

@keyframes rotate{

from{transform: rotateX(0deg) rotateY(0deg);}

to{transform: rotateX(360deg) rotateY(360deg);}

}

.out_frount{

transform:translateZ(100px);

}

.out_back{

transform:translateZ(-100px);

}

.out_left{

transform:rotateY(90deg) translateZ(100px);

}

.out_right{

transform: rotateY(-90deg) translateZ(100px);

}

.out_top{

transform:rotateX(90deg) translateZ(100px);

}

.out_bottom{

transform: rotateX(-90deg) translateZ(100px);

}

.in_frount{

transform:translateZ(50px);

}

.in_back{

transform:translateZ(-50px);

}

.in_left{

transform:rotateY(90deg) translateZ(50px);

}

.in_right{

transform: rotateY(-90deg) translateZ(50px);

}

.in_top{

transform:rotateX(90deg) translateZ(50px);

}

.in_bottom{

transform: rotateX(-90deg) translateZ(50px);

}

#react:hover .out_frount{

transform:translateZ(200px);

}

#react:hover .out_back{

transform:translateZ(-200px);

}

#react:hover .out_left{

transform:rotateY(90deg) translateZ(200px);

}

#react:hover .out_right{

transform: rotateY(-90deg) translateZ(200px);

}

#react:hover .out_top{

transform:rotateX(90deg) translateZ(200px);

}

#react:hover .out_bottom{

transform: rotateX(-90deg) translateZ(200px);

}

@charset "utf-8";

/* CSS Document */

</style>

</head>

<body>

<div id="react">

<div class="out_frount">

<image src="image/1.jpg" class="out_pic">

</div>

<div class="out_back">

<image src="image/1.jpg" class="out_pic">

</div>

<div class="out_left">

<image src="image/1.jpg" class="out_pic">

</div>

<div class="out_right">

<image src="image/1.jpg" class="out_pic">

</div>

<div class="out_top">

<image src="image/1.jpg" class="out_pic">

</div>

<div class="out_bottom">

<image src="image/1.jpg" class="out_pic">

</div>

<span class="in_frount">

<image src="image/1.jpg" class="in_pic">

</span>

<span class="in_back">

<image src="image/1.jpg" class="in_pic">

</span>

<span class="in_left">

<image src="image/1.jpg" class="in_pic">

</span>

<span class="in_right">

<image src="image/1.jpg" class="in_pic">

</span>

<span class="in_top">

<image src="image/1.jpg" class="in_pic">

</span>

<span class="in_bottom">

<image src="image/1.jpg" class="in_pic">

</span>

</div>

</body>

</html>

前端特效之520表白神器-旋转照片墙-OO.INK资源网

摆脱单身就差这一步了,赶紧学起来,记得回来关注哦!

相关推荐: 超级简单实用的ThinkPHP邮件发送类

超级简单实用的ThinkPHP邮件发送类,只需要简单配置几个参数,就可以用于网站的邮件发送、邮件激活剂密码找回。 /* * 邮件发送 * @param string $to 收件人邮箱,多个邮箱用,分开 * @param string $title 标题 * …

 


关注微信公众号『OOINK』

第一时间了解最新资源动态关注OO.INK不迷路~

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载资源需要解压密码,解压密码是什么?
如下载的资源需要解压密码,请查看下载页右侧查找解压密码;
如没有解压密码请尝试默认解压密码:www.oo.ink 或者 oo.ink
或者联系我们获取解压密码!
1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

OO.INK资源网 » 前端特效之520表白神器-旋转照片墙
+已在风雨中度过
为兴趣而改变,为梦想而努力!
+已坚持更新
时时更新,确保最新~

开通SVIP,畅享全站资源下载~

立即了解