程序员经验分享-hwhale

纯HTML加CSS实现3D立体动态相册

2023-10-27

听说是大佬写给女朋友的

效果：

在这里插入图片描述

 

卧槽，我又没女盆友我激动个啥。

具体代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>加油</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		
		.wrap{width: 600px;height: 400px;margin: 200px auto;}
		.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
		.box>div{width: 200px;height: 200px;font-size: 60px;opacity: .5;position: absolute;top: 0;left: 0;transition: all 1s;}
		
		.box img{width: 200px;height: 200px;}
		
		.left{transform: rotateY(90deg) translateZ(-100px);}
		.right{transform: rotateY(90deg) translateZ(100px);}
		.top{transform: rotateX(90deg) translateZ(100px);}
		.bottom{transform: rotateX(90deg) translateZ(-100px);}
		.after{transform: translateZ(-100px);}
		.before{transform: translateZ(100px);}
		
		.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
		.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
		.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
		.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
		.wrap .box:hover .after{transform: translateZ(-160px);}
		.wrap .box:hover .before{transform: translateZ(160px);}
		
		@keyframes move{
			from{transform: rotateX(0deg) rotateY(0deg);}
			to{transform: rotateX(13deg) rotateY(720deg);}
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<div class="left"><img src="img/01.jpg" alt=""></div>
			<div class="right"><img src="img/02.jpg" alt=""></div>
			<div class="top"><img src="img/03.jpg" alt=""></div>
			<div class="bottom"><img src="img/04.jpg" alt=""></div>
			<div class="after"><img src="img/05.jpg" alt=""></div>
			<div class="before"><img src="img/06.jpg" alt=""></div>
		</div>
	</div>
</body>
</html>

原文链接：https://huangfuyk.blog.csdn.net/article/details/105325781

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

htmlcss

纯HTML加CSS实现3D立体动态相册 的相关文章

  • HTML+CSS简单复习

    目录 什么是HTML CSS VSCode编辑器 HTML基本结构和属性 HTML初始代码 HTML注释 标题与段落 文本修饰标签 图片标签 路径的引入 链接标签 锚点 特殊字符 列表标签 表格标签 表单标签 div和span CSS基础语

  • CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距

    场景 Flex是Flexible Box的缩写 意为 弹性布局 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列 实现如下类似布局 最外层是是一个div div里面是上面一个照片 下面一个表单 这两个元素居中排列 注 博客 霸道流氓

  • visibility 与 overflow

    display 3 属性描述 设置或获取对象是否及如何显示 版本变更 是 语法模板 display none inline block list item inline block table inline table table capt

  • 纯HTML加CSS实现3D立体动态相册

    听说是大佬写给女朋友的 效果 卧槽 我又没女盆友我激动个啥 具体代码如下

  • css set a4 paper size

    HTML div class book div class page div class subpage Page 1 2 div div div class page div class subpage Page 2 2 div div

  • 原生JS实现拾色器功能

    没事儿干 写一个拾色器 原生 JS 实现 先看效果图 一 写页面 div class circle div circle width 200px height 200px border 1px 999 solid margin 200px

  • 折腾响应式布局设计

    看到这个标题是不是很头大呢 不错 我这一周就折腾了这个既是要求瀑布流 又是响应式布局的货 而且还是在bootstrap框架上折腾的 所以对于响应式布局呢 咱们可以忽略了吗 当然是不行的 响应式布局概念 Responsive design 意

  • css补充2：flex布局，居中方案等

    一 flex 布局 1 1 flex布局原理 flex是flexible Box的缩写 意为 弹性布局 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为flex布局 当我们为父盒子设为flex布局以后 子元素的float clear

  • 五种方案实现CSS三栏布局

    方案一 浮动布局float

  • iframe无边框(隐藏边框)

    用css的border none来去掉iframe的边框在IE下起不了作用 将iframe的frameborder属性的值设为no就可以

  • html使用ajax实现文件分片上传

    在实用中 经常有上传文件的操作 但是上传的文件有时会很大 所以需要将文件分片 然后一片一片上传到后台 其实前端写法跟普通的文件上传没有区别 只是需要把文件切割一下就好了 下面是一个例子 代码 结果 js部分 获取文件后就开始分片上传 有两个

  • 清除浮动之after伪元素

  • PHP登录注册页面

    注册 html 注册1 php

  • CSS3——@keyframe动画的基本用法，常见错误及解决方案

    文章目录 一 基本用法 1 关键帧 keyframes 2 示例 二 常见错误及解决方案 1 keyframes 不能实现突变的状态变化 display替代方案 1 占据空间 visiblity 2 不想占据空间 绝对定位 visiblit

  • 清除浮动之双伪元素清除浮动

  • W3C？什么是W3C相关标准？

    什么是W3C标准 什是W3C标准 不是一个标准 而是万维网联盟制定的一系列标准 网页主要由三部分组成 结构 Structure 表现 Presentation 和行为 Behavior 对应的标准也分三方面 结构化标准语言主要包括XHTML

  • React+Ant.Design 从零开始搭建个人博客实战教程01 —— 起步

    简介 刚入手一个服务器 打算搭个个站 平时工作都是用vue 为了扩展自己的实战能力 来从头开始实战用用react吧 结合ant design一起开发 然后后台nodejs来写 编写我的第一个教程文章 从头到尾记录整个过程 因为是实战项目 部

  • 盒模型BFC渲染机制

    目录 一 BFC基本慨念 二 BFC渲染规则 三 如何创建BFC元素 一 BFC基本慨念 一个块格式化上下文 block formatting context 是Web页面的可视化CSS渲染出的一部分 它是块级盒布局出现的区域 也是浮动层元

  • 解决width: 100%；再设置margin问题

    最近在做前端 遇到了这么个小问题 就是当我们把一个 div 的 width 设置为 100 之后 再设置 margin 的时候 这个div 莫名其妙的超出了屏幕 情景如下图 这就很难受了啊 不过办法总比困难多 下面 我将讲两种解决方法 方法

  • input标签是什么？input标签属性有哪些

    input标签属于什么标签 input标签属性有哪些 相信刚接触的表单的小白应该很陌生 那么接下来我们就来讲一下input标签属性有哪些 首先小编在这里谢谢大家一直的支持 每天都会更新十个web前端基础内容 需要的可以关注我 另外也可以进我

随机推荐

  • torch.nn.softmax(dim),理解Softmax分类器

    首先我们要了解softmax的计算公式 例如一列数组 1 2 3 4 5 6 7 8 9 10 代入到softamx计算公式之中 我们可以从公式中看出元素的数值越大 softmax算出的值也就越大 对应在图像处理中也就是概率越大 impor

  • WSA安卓子系统最新版下载直链:微软已更新至1.8.32822.0版本适用于Android的Windows子系统无需切换美区和Beta通道

    WSA安卓子系统最新版直连下载链接 微软已更新至V1 8 32822 0版本适用于Android的Windows子系统无需切换美区和Beta通道 01 引言 优爱酷在10月份微软刚刚发布安卓子系统 WSA 之后 在第一时间即为全网朋友编辑发

  • 方法中定义的局部变量是否为线程安全的？

    方法中定义的局部变量是否为线程安全的 具体问题 具体分析 比如我们就拿StringBuilder来分析吧 首先你需要明白 StringBuilder和StringBuffer都是可变的 但是StringBuffer是线程安全的 而Strin

  • HTML之4.4 图像标记

    4 4 图像标记 4 4 1 图像格式 3种 1 GIF格式 定义 支持动画 无损 支持透明 全透或不透 特点 只能处理256种颜色 用途 用于Logo 小图标 2 PNG格式 定义 包括PNG 8和真色彩 PNG 24 和 PNG 32

  • 众享比特荣膺2020新一代信息技术行业潜力10强企业

    近日 由中关村科学城管委会指导 2020高成长企业TOP100年度盛典活动组委会主办 中关村高新技术企业协会 中关村创业投资和股权投资基金协会支持的2020高成长企业TOP100年度盛典活动揭晓榜单 北京众享比特科技有限公司凭借核心技术自主

  • 数学建模之综合评价模型（层次分析法+Topsis法+熵权法）

    以下内容均听自清风老师的建模教程 老师讲的很好哦 大家可以去听听 结合实例不枯燥 一 层次分析法 以一道例题进行分析 小明同学想出去旅游 在查阅了网上的攻略后 他初步选择了苏杭 北戴河 桂林三个地方 请你确定评价指标 形成评价体系为小明同学

  • 批量cherry-pick

    单个commit只需要git cherry pick commitid 多个commit 只需要git cherry pick commitid1 commitid100 注意 不包含第一个commitid 即 git cherry pic

  • 复习之Linux系统中的进程管理

    1 什么是进程 线程 进程 Process 是操作系统进行资源分配的最小单位 一个进程是一个程序的一次执行过程 每启动一个进程 操作系统就会为它分配一块独立的内存空间 用于存储PCB 数据段 程序段等资源 每个进程占有一块独立的内存空间 线

  • elfutils-0.178 configure 报错

    系统 Ubuntu 20 04 4 LTS 错误信息 checking for libmicrohttpd no checking for libcurl no checking for sqlite3 no checking for li

  • BrupSuite密码爆破

    1 简单密码爆破 环境准备server 2008 Kali 然后将他们的网卡设置为nat模式 打开搭建的靶场 将难度等级设置为最低 打开密码爆破工具burpsuite 将intercept修改为on 表示开始拦截数据包 然后在浏览器中开启b

  • 问题笔记之 no module named apt_pkg

    ubuntu 系统将python3 6升级到3 8以后 执行 apt update指令报错 no module named apt pkg 解决方法 1 进入包文件夹 cd usr lib python3 dist packages 2 发

  • python爬虫之urllib库的高级用法（案例解释）

    urllib库的高级用法 设置请求头 from fake useragent import UserAgent这个库获取请求头 from urllib request import urlopen Request from urllib p

  • QWidget的ui界面绘制成图片

    文章目录 源文件 源码解释 效果 修复图片清晰度 源文件 include widget h include ui widget h include

  • （转）Awesome Human Pose Estimation

    Awesome Human Pose Estimation 2018 10 08 11 02 35 Copied from https github com cbsudux awesome human pose estimation A c

  • Java基础---为什么不能用浮点数表示金额

    缘由 因为不是所有的小数都能用二进制表示 所以 为了解决这个问题 IEEE提出了一种使用近似值表示小数的方式 并且引入了精度的概念 这就是我们所熟知的浮点数所以 浮点数只是近似值 并不是精确值 所以不能用来表示金额 否则会有精度丢失 在Ja

  • OCR原理及应用

    什么是OCR技术以及它的应用场景 OCR的基本原理简单地说 OCR的基本原理就是通过扫描仪将一份文稿的图像输入给计算机 然后由计算机取出每个文字的图像 并将其转换成汉字的编码 其具体工作过程是 扫描仪将汉字文稿通过电荷耦合器件CCD将文稿的

  • javascript 出现Unexpected identifier问题

    chrome下运行编写的javascript代码时 在工具javascript控制台下有时会出现 Uncaught SyntaxError Unexpected identifier 的报错 经过我反复查看代码最后得出 原来是代码中缺少一个

  • golang之cobra框架入门(windows下)

    首先下载cobra go get github com spf13 cobra cobra 下载完成之后 将会自动在环境变量中添加cobra 使用命令进行初始化项目 cobra init pkg name name 初始化项目成功 但是如果

  • layui/font/iconfont.woff2?v=250

    Intervention Slow network is detected See https www chromestatus com feature 5636954674692096 for more details Fallback

  • 纯HTML加CSS实现3D立体动态相册

    听说是大佬写给女朋友的 效果 卧槽 我又没女盆友我激动个啥 具体代码如下

热门标签