程序员经验分享-hwhale

抖音超火3D相册——魔方版（肖战壁纸图片）

2023-05-16

抖音超火3D相册——魔方版（肖战壁纸图片）

闲来无事，写了一个HTML5和CSS的肖战3D相册，以下奉上效果图和源代码。
（PS：鼠标触碰可以显示内层六面体照片，拖动图片可以保存图片至本地。）

效果图：在这里插入图片描述

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body{
			background: yellow;
		}
		/*最外层样式*/
			.wrap{
				width: 200px;
				height 200px;
				margin: 200px auto;
				/*border: 1px solid red;*/
				/*background: red;*/
				position: relative;					
			}
			/*包裹所有容器的样式*/
			.cube{
				width: 200px;
				height: 200px;
				/*perspective: 500px;*/
				/*保持3D效果*/
				margin: 0 auto;
				transform-style: preserve-3d;
				transform: rotateX(-30deg) rotateY(-80deg);	
				animation: rotate linear 10s 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;*/
				/*0.4秒*/
				transition: all .4; 
			}
			/*定义所有图片的样式*/
			.pic{
				width: 200px;
				height: 200px;				
			}									
			.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 .Out_Front{
				transform: rotateY(0deg) translateZ(100px);
			}
			.cube .Out_Back{			
				transform: translateZ(-100px) rotateY(180deg);
			}
		
			/*定义小正方体的样式*/
			.cube span{
				display: block;
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			
		 	.cube .in_pic{
				width: 100px;
				height: 100px;
			}
																
			.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 .In_Front{
				transform: rotateY(0deg) translateZ(50px);
			}
			.cube .In_Back{			
				transform: translateZ(-50PX) 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);
			}
			.cube:hover .Out_Front{
				transform: translateZ(200PX);
			}
			.cube:hover .Out_Back{
				transform: translateZ(-200PX);
			}
		</style>
	</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/2.jpg"  class="pic"/>
				</div>	
				<div class="Out_Top">
					<img src="img/3.jpg"  class="pic"/>
				</div>
				<div class="Out_Bottom">
					<img src="img/4.jpg"  class="pic"/>
				</div>
				<div class="Out_Left">
					<img src="img/5.jpg"  class="pic"/>
				</div>
				<div class="Out_Right">
					<img src="img/7.jpg"  class="pic"/>
				</div>
				
				<span class="In_Front">
					<img src="img/6.jpg" class="in_pic"/>					
				</span>
				<span class="In_Back">
					<img src="img/6.jpg" class="in_pic"/></span>
				<span class="In_Top">
					<img src="img/6.jpg" class="in_pic"/>					
				</span>
				<span class="In_Bottom">
					<img src="img/6.jpg" class="in_pic"/>
				</span>
				<span  class="In_Left">
					<img src="img/6.jpg"  class="in_pic"/>
				</span>
				<span class="In_Right">
					<img src="img/6.jpg" class="in_pic"/>
				</span>			
			</div>			
		</div>
	</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

抖音超火

肖战壁纸图片

抖音超火3D相册——魔方版（肖战壁纸图片） 的相关文章

  • 如何正确的报修

    先讲个故事 xff0c 今天接到一宗报修 xff0c 主题是 数据库连不上了 xff0c 我的天 xff0c 大事件啊 xff0c 习惯性地立即测试一下 xff0c 发现一切正常 随后开始追问谁说的 数据库连接不上 xff0c 原来是一个女

  • HTML5移动应用抓包

    有时候看到某个移动应用很不错 xff0c 想研究一下其HTML5源码 xff0c 样式表 xff0c 脚本什么的 xff0c 正常方法是不好得到的 通常可以用Safari伪造User Agent来欺骗目标网站 xff0c 让网站认为你是一个

  • python求无向图的连通子图

    参考链接 xff1a https blog csdn net u010330109 article details 89525729 使用networkx包求图的所有连通子图 span class token keyword import

  • 学习libpcap库，写例子代码－－port_protocol.hpp

    ifndef PORT PROTOCOL define PORT PROTOCOL include lt string gt include lt netdb h gt for getservbyport include 34 file h

  • ubuntu18.04系统用户登录陷入登录循环

    问题 xff1a ubuntu用户登录时输入密码又跳回登录界面 解决 xff1a 在登录界面按下ctrl 43 alt 43 F2进入tty2终端 输入用户名和密码 xff08 报错显示login incorrect xff0c 用户名统一

  • 阿里云云效Maven制品仓库的ip白名单列表

    阿里云的云效提供了一系列的云开发工具 xff0c 其中包括 Maven 制品仓库 xff0c 可以提供便捷的 mvn 私库服务 但是因为公司基于安全考虑 xff0c 防火墙策略非常严格 xff0c 仅允许 ip 白名单列表内的数据包可以正常

  • lamp

    文章目录 1 LAMP架构介绍2 web服务器工作流程2 1 cgi与fastcgi2 2 httpd与php结合的方式2 3 web工作流程 3 lamp平台构建3 1 安装httpd3 2 安装mysql3 3 安装php3 4 配置a

  • 自适应中值滤波及MATLAB实现

    自适应中值滤波器是以m n的矩形窗口Sxy定义的滤波器区域内图像的统计特性为基础的 xff0c 可以处理具有更大概率的脉冲噪声如椒盐噪声 xff0c 在平滑非脉冲噪声时能保留细节 在Sxy定义的滤波器区域内定义如下变量 xff1a Zmin

  • Microsoft Visual C++ Runtime Library Runtime Error的解决办法

    打开浏览器时 xff0c 出现Microsoft Visual C 43 43 Runtime Library Runtime Error错误 xff0c 初步估计是软件冲突 xff0c 可能有多种出错的方式 xff0c 我的是浏览器自动关

  • 你应该掌握的——树和二叉树

    我在上课的时候 xff0c 由于各种原因 xff0c 上课老师讲的自己总不爱听 xff0c 现在到火烧眉毛了 xff0c 才知道这些基础知识的重要性 xff0c 现在想想 xff0c 也没有那么的困难 重在理解这些底层的概念 xff0c 然

  • 把学习由复杂变简单（二叉树和树）

    现在发现二叉树和树讲起来真的是没完没了 xff0c 刚发表博客之后发现 xff0c 那还不足以表述这颗大树 我们继续完善 树与二叉树遍历确实很重要 xff0c 但是还有一些你也许忘记的重要知识点 xff0c 我们再来看一下还有什么好玩的 x

  • 原来编译原理可以这么学

    最近对数据结构的研究又有了进展 xff0c 挺好玩的 xff0c 总结这些内容的同时 xff0c 希望也能帮助到大家 xff0c 这样的话 xff0c 达到双赢 xff0c 这才是写博客的目的 xff0c 接下来我们来轻松学习编译原理 xf

  • 流水线—你理解多少？

    流水线 xff1a 流水线是指在程序执行时多条指令重叠进行操作的一种准并行处理实现技术 各种部件同时处理是针对不同指令而言的 xff0c 它们可同时为多条指令的不同部分进行工作 xff0c 以提高各部件的利用率和指令的平均执行速度 概念我们

  • 生活中的PV操作

    之前写过操作系统的文章 xff0c 然后最近发现少了点什么 xff0c 仔细检查发现 xff0c 没写PV操作 xff0c 那么我们接下来就单独为PV操作写一篇博客 xff0c 让大家不再惧怕PV操作 xff0c 我们深入浅出的分析 xff

  • 精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式

    表格和表单是网页中非常重要的两个元素 xff0c 我们这次来说说CSS如何设置表格和表单样式 我们先来看看CSS如何控制表格 首先表格中的标记 xff1a 我们看一下代码 xff1a lt html gt lt head gt lt tit

  • J2EE技术规范（七）——JTA（理解JTA，编写简单的事务客户程序）

    之前的内容中 xff0c 写了几篇关于J2EE规范的博客 xff0c 现在继续来完善这些内容 xff0c 这次内容主要补充上一篇博客 WebLogic Server使用JTA1 0 1a实现和管理事务 WebLogic Server提供以下

  • Android Studio（2.3.3）配置Kotlin笔记

    1 为AS装上Kotlin插件 xff0c 步骤如下 xff1a File gt Settings gt Plugins gt Browse Repositories中搜索 Kotlin gt 安装 xff08 Install xff09

  • J2EE技术规范（八）——JMS（消息，域）

    老样子 xff0c 继续完善J2EE技术规范 xff0c 这次内容主要是写个JMS 理解面向消息的中间件 定义 xff1a 消息 xff08 1 xff09 消息是可编程实现两端通信的机制 xff08 2 xff09 一些消息技术如 xff

  • J2EE技术规范（九）——JMS （JMS客户端）

    上篇博客写了JMS的一些内容 xff0c 后来觉得那篇博客的内容不够阐述JMS的内容 xff0c 所以这篇博客就继续完善JMS 在WebLogic Server 环境中配置JMS WebLogic Server的JMS特性 WebLogic

随机推荐

  • C++多线程项目 - 进程间通信实现（一）

    进程间通信实现 xff08 一 xff09 匿名管道有名管道匿名内存映射内存映射共享内存内存映射与共享内存比较 匿名管道 这里利用的是读时共享的策略 xff0c 因为只有读操作时 xff0c 子进程是共享父进程的资源 xff0c 那么我们进

  • KBQA的主要流程及部分Top竞赛方案总结

    一 KBQA的主要流程 1 1 什么是KBQA 给定自然语言问题 xff0c 通过对问题进行语义理解和解析 xff0c 进而利用知识库进行查询 推理得出答案 1 2 KBQA的实现范式 KBQA在技术上可以分成两种方案 xff0c 分别是一

  • Could not resolve host: github.com的解决方案

    描述 xff1a 新装的ubuntu2004 xff0c git clone命令时遇到标题描述问题 发现可以上网 xff0c 但是ping github com会出错 解决方法 xff1a 第一步 1 打开hosts文件 sudo vim

  • VirtualBox虚拟机网络怎么设置 VirtualBox虚拟机网络设置详细教程

    VirtualBox是国外的一款虚拟系统软件 xff0c 功能强大 xff0c 对于很多开发用户有所帮助 那么VirtualBox虚拟机网络该如何设置呢 相信很多用户会被这么一个问题所困扰 xff0c 下面小编来详细介绍下VirtualBo

  • C++库文件解析(conio.h)

    Conio h 控制台输入输出库 该文内容部分参照百度百科 Conio h 在C stanard library ISO C 和POSIX标准中均没有定义 Conio 是Console Input Output的简写 xff0c 其中定义了

  • [Qt] Linux环境下从源码编译Qt

    官网参考 xff1a Qt for Linux X11 Building from Source Qt 5 15 源码下载 xff1a Index of archive qt 5 15 5 15 0 submodules 这里使用的是各个模

  • Collections.max（）方法不返回String类型的实际大小

    对于String类型的迭代器是按照字典序列排序的 xff0c 要让Collections max 方法返回实际的大小 xff0c 需要添加比较器 jdk8中对于Collections max xff09 方法有如下的说明 xff1a 样例

  • 简单三步，Github Pages自定义域名开启HTTPS

    登陆域名服务商后台增加 xff0c 域名解析记录 记录值格式为 xff1a username github io 登陆github xff0c 进行仓库设置 添加 自己的域名 xff0c 开启HTTPS

  • FtpClient.storeFile返回false解决方法

    原文地址为 xff1a FtpClient storeFile返回false解决方法 今天在利用FTP将客户端文件存储到服务器端时 xff0c 在调用ftpClient storeFile方法后 xff0c 总是返回false xff0c

  • 上班一个月，我的几点体会

    这篇博文其实在去年就已经在CSDN发过的 后来 xff0c 某次误操作不小心删除了 xff0c 今天找出来重新发一下 我是从3月1号开始上班的 xff0c 今天3月31号 xff0c 刚好一个月结束 xff0c 在这一个月里 xff0c 我

  • 我这一年写的博文

    总结2013 xff0c 展望2014 xff0c gt gt 我的2013年终总结 在苦与乐中成长 下面是我这一年所写的博客 xff0c 主要涉及C xff0c Net Framework xff0c SQL Server xff0c S

  • 我的2013年终总结——在苦与乐中成长

    写在前面 最近正好在三亚旅游 xff0c 空闲下来时 xff0c 便开始进行年终总结 由于去年年末较忙 xff0c 便错过了2012 年的年终总结 xff0c 所以本文将会对 2012 与 2013 两年一起进行总结 说说工作 学生 到 码

  • 走过2014，2015我将继续前行

    写在前面 一转眼 xff0c 一年时光就这么溜走了 在这辞旧迎新之际 xff08 这说法是不是很官方啊 xff0c 呵呵 xff01 xff09 xff0c 我将对即将过去的2014 年进行一番总结 xff0c 并对即将来临的 2015 年

  • C#使用随机数模拟器来模拟世界杯排名(二)

    接上一篇 xff1a C 使用随机数模拟器来模拟世界杯排名 一 C 使用随机数模拟器来模拟世界杯排名 一 斯内科的博客 CSDN博客 我们使用洗牌随机数算法来匹配世界杯对战国家 xff1a 新建洗牌随机数相关类RandomUtil 用于随机

  • Windows Server 2012 R2 服务器密码忘记问题

    解决方法 xff1a 1 准备好一张和当前Windows server 2012R2系统版本和位数相近 xff08 最好相同 xff09 的系统镜像光盘或者ISO文件 2 通过BIOS设置系统从光盘启动 出现安装系统的画面 xff0c 点击

  • Butterknife的替代者ViewBinding的简单使用

    Android自家的 xff0c 又可以省去findviewbyid xff0c 而且Butterknife上大神都已经推荐使用的 xff0c 还有什么理由不去改写呢 build gradle 开启viewBinding功能 android

  • matlab中删除矩阵中的某些行

    方法1 遍历所有行 xff0c 找到满足要求的行tag xff0c 然后调用A a 61 A span class token operator 61 span neighborhood s span class token punctua

  • MySQL 创建新用户并给授权指定的数据库权限

    首先创建用户 span class token comment 低版本数据库 span create user span class token string 39 用户民 39 span 64 span class token strin

  • 如何远程连接Linux服务器

    远程登陆linux xff0c 使用的是ssh协议 windows平台下有putty xff0c Xshell xff0c SecureCRT等工具来远程连接linux服务器 1 putty是一款非常轻量级的SSH连接工具 xff0c 可以

  • 抖音超火3D相册——魔方版（肖战壁纸图片）

    抖音超火3D相册 魔方版 xff08 肖战壁纸图片 xff09 闲来无事 xff0c 写了一个HTML5和CSS的肖战3D相册 xff0c 以下奉上效果图和源代码 xff08 PS xff1a 鼠标触碰可以显示内层六面体照片 xff0c 拖

热门标签