html旋转相册
一、实验题目
做一个旋转的3d相册，当鼠标停留在相册时，相册向四面散开
二、实验代码
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{perspective: 1500px;}@keyframes myAnimation {from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}.container{margin:200px;position: relative;transform-style: preserve-3d;/* animation:myAnimation 5s linear 0s infinite; */animation-name: myAnimation;animation-duration: 5s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;}.container:hover>img:first-child{left: -300px;}.container:hover>img:nth-child(2){top: -300px;}.container:hover>img:nth-child(3){left: 300px;}.container:hover>img:nth-child(4){top: 300px;}.container:hover>img:nth-child(6){transform: translateZ(300px);}.container:hover>img:nth-child(5){transform: translateZ(-100px);}.container>img{width: 200px;height: 200px;position: absolute;border: 1px solid red;transition: 3s;}.container>img:first-child{left: -200px;transform-origin: right;transform: rotateY(90deg);}.container>img:nth-child(2){top:-200px;transform-origin: bottom;transform:rotateX(-90deg);}.container>img:nth-child(3){left: 200px;transform-origin: left;transform:rotateY(-90deg)}.container>img:nth-child(4){top: 200px;transform-origin: top;transform: rotateX(90deg);}.container>img:nth-child(6){transform: translateZ(200px);}</style></head><body><div class="container"><img src="https://img1.baidu.com/it/u=4141189809,1768157998&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt=""><img src="https://img0.baidu.com/it/u=2016271455,67708748&fm=253&fmt=auto&app=138&f=PNG?w=500&h=402" alt=""><img src="https://img2.baidu.com/it/u=2015943875,2629908785&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666" alt=""><img src="https://img2.baidu.com/it/u=106832573,1691962947&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=682" alt=""><img src="https://img0.baidu.com/it/u=2104936347,2912513001&fm=253&fmt=auto&app=138&f=JPEG?w=389&h=500" alt=""><img src="https://img1.baidu.com/it/u=1599285144,422526079&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375" alt=""></div></body>
</html>三、实验效果
相关文章：
html旋转相册
一、实验题目 做一个旋转的3d相册，当鼠标停留在相册时，相册向四面散开 二、实验代码 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" con…...
Plantuml之对象图语法介绍(十九)
简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…...
深度学习（八）：bert理解之transformer
1.主要结构 transformer 是一种深度学习模型，主要用于处理序列数据，如自然语言处理任务。它在 2017 年由 Vaswani 等人在论文 “Attention is All You Need” 中提出。 Transformer 的主要特点是它完全放弃了传统的循环神经网络（RNN&#x…...
, Filter(), Find(), Map(), Negate(), Position())
R语言中的函数28：Reduce(), Filter(), Find(), Map(), Negate(), Position()
文章目录 介绍Reduce()实例 Filter()实例 Find()实例 Map()实例 Negate()实例 Position()实例 介绍 R语言中的Reduce(), Filter(), Find(), Map(), Negate(), Position()是base包中的一些高级函数。随后，很多包也给这些函数提供了更多的扩展。 Reduce() 该函数根…...
RTP/RTCP/RTSP/SIP/SDP/RTMP对比
RTP（Real-time Transport Protocol）是一种用于实时传输音频和视频数据的协议。它位于传输层和应用层之间，主要负责对媒体数据进行分包、传输和定时。 RTCP（Real-Time Control Protocol）是 RTP 的控制协议，…...
Centos安装vsftpd：centos配置vsftpd，ftp报200和227错误
一、centos下载安装vsftpd（root权限） 1、下载安装 yum -y install vsftpd 2、vsftpd的配置文件 /etc/vsftpd.conf 3、备份原来的配置文件 sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.backup 4、修改配置文件如下：vi /etc/vsftpd.conf …...
软件测试职业规划
软件测试人员的发展误区【4】 公司开发的产品专业性较强，软件测试人员需要有很强的专业知识，现在软件测试人员发展出现了一种测试管理者不愿意看到的景象： 1、开发技术较强的软件测试人员转向了软件开发(非测试工具开发)； 2、业务…...
C语言数据结构
C 语言是一种强大的编程语言，它提供了许多数据结构的实现。在本文档中，我们将讨论一些常见的数据结构，并提供相应的代码示例。 数组（Array） 数组是一种线性数据结构，它可以存储相同类型的元素。数组的大小…...
PHP之Trait理解, Trait介绍
一、来源 自 PHP 5.4.0 起，PHP 实现了一种代码复用的方法，称为 trait。 Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制。Trait 为了减少单继承语言的限制，使开发人员能够自由地在不同层次结构内独立的类中复用 method。Trait 和…...
SpringMVC：执行原理详解、配置文件和注解开发实现 SpringMVC
文章目录 SpringMVC - 01一、概述二、SpringMVC 执行原理三、使用配置文件实现 SpringMVC四、使用注解开发实现 SpringMVC1. 步骤2. 实现 五、总结注意： SpringMVC - 01 一、概述 SpringMVC 官方文档：点此进入 有关 MVC 架构模式的内容见之前的笔记&a…...
增量式旋转编码器在STM32平台上的应用
背景 旋钮是仪器仪表上一种常见的输入设备，它的内部是一个旋转编码器，知乎上的这篇科普文章对其工作原理做了深入浅出的介绍。 我们公司的功率分析仪的前面板也用到了该类设备，最近前面板的MCU从MSP430切换成了STM32，因此我要将…...
INFINI Gateway 如何防止大跨度查询
背景 业务每天生成一个日期后缀的索引，写入当日数据。 业务查询有时会查询好多天的数据，导致负载告警。 现在想对查询进行限制–只允许查询一天的数据（不限定是哪天），如果想查询多天的数据就走申请。 技术分析 在每…...
【模式识别】探秘分类奥秘：最近邻算法解密与实战
🌈个人主页：Sarapines Programmer🔥 系列专栏：《模式之谜 | 数据奇迹解码》⏰诗赋清音：云生高巅梦远游， 星光点缀碧海愁。 山川深邃情难晤， 剑气凌云志自修。 目录 🌌1 初识模式识…...
【Redis】分布式锁
目录 分布式锁分布式锁实现的关键 Redisson实现分布式锁看门狗机制 分布式锁 为什么要使用分布式锁，或者分布式锁的使用场景？ 定时任务。在分布式场景下，只控制一台服务器执行定时任务，这就需要分布式锁 要控制定时任务在同一时间…...
Linux访问firefox 显示Error: no DISPLAY environment variable specified
在 CentOS 7 中访问 Firefox 浏览器时，出现 "Error: no DISPLAY environment variable specified" 的错误提示通常是由于缺少显示环境变量导致的。 要解决这个问题，你可以按照以下步骤进行配置： 1. 确保已经安装 X Window Syst…...
线性回归简介
线性回归简介 1、情景描述2、线性回归 1、情景描述 假设，我们现在有这么一张图： 其中，横坐标x表示房子的面积，纵坐标y表示房价。我们猜想x与y之间存在线性关系： y k x b ykxb ykxb 现在，思考一个问题&…...
Log4net 教程
一、Log4net 教程 在CodeProject上找到一篇关于Log4net的教程：log4net Tutorial，这篇博客的作者是：Tim Corey ，对应源代码地址为： https://github.com/TimCorey/Log4netTutorial，视频地址为：Ap…...
test-01-java 单元测试框架 junit 入门介绍
JUnit JUnit 是一个用于编写可重复测试的简单框架。 它是 xUnit 架构的一种实例，专门用于单元测试框架。 What to test? NeedDescRight结果是否正确B边界条件是否满足I能反向关联吗C有其他手段交叉检查吗E是否可以强制异常发生P性能问题 maven 入门例子 maven …...
Linux系统中跟TCP相关的系统配置项
TCP连接保活 参考 《Nginx(三) 配置文件详解 - 基础模块》3.18章节 net.ipv4.tcp_keepalive_intvl：设置TCP两次相邻探活检测的间隔时间。默认75秒，单位是秒，对应配置文件/proc/sys/net/ipv4/tcp_keepalive_intvl；net.ipv4.tcp_kee…...
python图片批量下载多线程+超时重试
背景 上篇python入门实战:爬取图片到本地介绍过如何将图片下载到本地,但是实际处理过程中会遇到性能问题:分页数过多下载时间过程、部分页面连接超时无法访问下载失败。本文从实战的角度解释一下如何处理这两个问题。 下载时间过长问题，处理方式是使用多线程，首先回顾…...
SingleFile CLI：5分钟掌握终极网页批量下载神器
SingleFile CLI：5分钟掌握终极网页批量下载神器 【免费下载链接】SingleFile Web Extension for saving a faithful copy of a complete web page in a single HTML file 项目地址: https://gitcode.com/gh_mirrors/si/SingleFile SingleFile CLI是一个强大的…...
终极指南：3分钟掌握Deepin Boot Maker，轻松制作Linux启动盘
终极指南：3分钟掌握Deepin Boot Maker，轻松制作Linux启动盘 【免费下载链接】deepin-boot-maker 项目地址: https://gitcode.com/gh_mirrors/de/deepin-boot-maker 你是否曾经因为复杂的命令行操作而对Linux系统安装望而却步？或者面对…...
小白程序员看过来！TS同学半年逆袭AI大模型产品经理，收藏这份转行避坑指南！
TS同学从景观设计转行AI大模型产品经理的经历分享。他经历了离职、脱产学习、国企子公司项目被裁等波折，最终以20%薪资涨幅加入AI公司。文章重点介绍了他的心态调整、求职策略变化以及对“稳定”的新理解，同时探讨了AI时代教育孩子的思考。 本期嘉宾TS同…...
Android AI助手开发实战：基于MVVM与OpenAI API的AnywhereGPT项目解析
1. 项目概述与核心价值最近在折腾移动端AI应用，发现一个挺有意思的开源项目，叫AnywhereGPT-Android。简单来说，它就是一个让你能在Android手机上，通过调用OpenAI的API（比如GPT-3.5/4）或者本地部署的模型&am…...
国家十四五课题背书，镜像视界无感定位解决ReID跨镜全场景痛点
国家十四五课题背书，镜像视界无感定位解决ReID跨镜全场景痛点在数字孪生、视频孪生技术全面落地的当下，全域跨镜目标追踪与精准定位已成为智慧安防、智慧园区、智慧港口、军工厂管控、危化品园区管理等领域的核心刚需。传统跨镜追踪技术长期依赖ReID&…...
手机短剧拉片软件2026推荐，助力高效内容分析
手机短剧拉片软件2026推荐，助力高效内容分析在当今的影视行业中，手机短剧以其短小精悍、节奏紧凑的特点受到了广大观众的喜爱。对于创作者来说，如何深入分析这些短剧，学习其中的创作技巧，成为了提升自身水平的关键。据…...
AIGC面试指南：从Transformer到扩散模型，系统掌握核心技术与实战
1. 项目概述：一本面向AIGC求职者的实战指南最近几年，AI生成内容（AIGC）领域的热度可以说是“肉眼可见”地飙升。从文本生成、图像创作到视频合成，相关岗位如雨后春笋般涌现，吸引了大量开发者和研究者的目光。…...
桌面图标混乱终结者：用NoFences免费开源工具实现高效桌面管理
桌面图标混乱终结者：用NoFences免费开源工具实现高效桌面管理 【免费下载链接】NoFences 🚧 Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 还在为杂乱无章的桌面图标而烦恼吗？每天…...
在多轮对话任务中实测 Taotoken 路由策略对响应成功率的影响
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 在多轮对话任务中实测 Taotoken 路由策略对响应成功率的影响 1. 测试背景与场景设定 在开发需要长时间连续交互的对话型应用时&am…...
仅限首批200名DevOps工程师解密：DeepSeek内部CI/CD可观测性看板DSL语法与12个预置PromQL故障模式模板
更多请点击： https://intelliparadigm.com 第一章：DeepSeek CI/CD流水线的可观测性演进与战略定位 可观测性已从传统监控的“事后响应”范式，跃迁为DeepSeek CI/CD流水线的核心设计原则与战略支点。它不再仅关注指标（Metrics&…...