分享两组不同的3D VR卡片
最近某音上出现了很多VR视频，转动手机可以看到手机界面未显示出来的场景。这种事情我觉得我们也可以做到。
所以两种不同的3D VR卡片来了：
第一种是横向或上下可以拖动极大的距离。卡片上的信息会随着拖动移动，但不会显示更多的信息：
第二种是横向或者上下拖动距离有限。但卡片上显示信息可以表达的更多。
当然，有实力的同学可以结合两者或者对它们进行魔改，使其符合你们的需求~
下面分别是两种不同卡片的源码，送给需要的同学~
第一种：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><style>@import url(https://fonts.googleapis.com/css?family=Roboto);html, body {font-family: "Roboto", sans-serif;height: 100%;}body {background: linear-gradient(to bottom, #ddd 0%, #f0f0f0 40%);transform-style: preserve-3d;transform: perspective(800px);background-image: url(data:image/png;base64,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);}.wrap {position: absolute;perspective: 600px;height: 100%;width: 100%;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;text-align: center;}.card-shadow, .card {margin: 0 auto;margin-top: 100px;width: 300px;height: 450px;z-index: 1;position: absolute;border-radius: 10px;top: 0px;bottom: 0px;left: 0px;right: 0px;}.card {background: #fff url("https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?fit=crop&fm=jpg&h=950&q=80&w=1925") 50% 50%;background-size: 450%;}.card-shine {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;z-index: 1;border-radius: 10px;background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);z-index: -1;}.card-shadow {top: 10px;transform-style: preserve-3d;transform: translateZ(40px);z-index: -1;background: #B3B3B3;transform: scale(0.5, 0.5);box-shadow: 0 0 30px 10px #aaa;}.card-front, .card-title, .card-subtitle {position: absolute;color: #FFF;transform-style: preserve-3d;}.card-front {border-radius: 10px;width: 100%;height: 100%;z-index: 0;background-color: rgba(0, 0, 0, 0.1);}.card-title {font-weight: 700;text-align: left;left: 30px;bottom: 140px;font-size: 35px;line-height: 30px;text-shadow: 0 5px 8px rgba(0, 0, 0, 0.65);transform: translateZ(0px);overflow: hidden;margin: 0;width: 80%;}.card-subtitle {font-weight: normal;text-align: left;left: 30px;width: 80%;bottom: 80px;font-size: 25px;line-height: 20px;text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);transform: translateZ(0px);}</style>
</head>
<body>
<div class='wrap'><div class='card-shadow'></div><div class='card'><div class='card-front'><div class='card-title'>3D perspective title</div><div class='card-subtitle'>3D perspective subtitle</div><div class='card-shine'></div></div></div>
</div>
</body>
<script>var$card = $('.card'),$cardTitle = $('.card-title'),$cardSubtitle = $('.card-subtitle'),$cardShine = $('.card-shine'),$cardShadow = $('.card-shadow'),currentMousePos = { x: 0, y: 0 },mouseFromCenter = { x: 0, y: 0 };$(document).mousemove(function(event) {varwHeight= $(window).height(),wWidth= $(window).width();currentMousePos.x = event.pageX;currentMousePos.y = event.pageY;mouseFromCenter.x = currentMousePos.x - (wWidth / 2);mouseFromCenter.y = currentMousePos.y - (wHeight / 2);vararound1 = -1 * (currentMousePos.y * 100 / wHeight * 0.2 - 10) + 'deg',around2 = 1 * (currentMousePos.x * 100 / wWidth * 0.2 - 10) + 'deg',trans1 = (currentMousePos.x * 100 / wHeight * 0.3 ) + 'px',trans2 = (currentMousePos.y * 100 / wHeight * 0.3 ) + 'px',dy = event.pageY - wHeight / 2, //@h/2 = center of posterdx = event.pageX - wWidth / 2, //@w/2 = center of postertheta = Math.atan2(dy, dx), // angle between cursor and center of poster in RADangle = theta * 180 / Math.PI - 90,mousePositionX = ( currentMousePos.x / wWidth) * 100,mousePositionY = 50+( currentMousePos.y / wHeight)*10;// gradient angle and opacity for card shine effect$cardShine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + (currentMousePos.y / wHeight) * .7 + ') 0%,rgba(255,255,255, 0) 80%)');// card pos and angle$card.css({"-webkit-transform": "translate3d(" + trans1 + ", " + trans2 +", 0) scale(1) rotatex(" + around1 + ") rotatey(" + around2 + ")",'background-position': mousePositionX + '%' + ' ' + (currentMousePos.y / wHeight) * 50 + '%'});// card shadow pos and angle$cardShadow.css({"transform": "scale(.9,.9) translateX(" + ((mouseFromCenter.x * -0.02) + 12) + "px) translateY(" + ((mouseFromCenter.y * -0.02) + 12 ) + "px) scale(1.0) rotateY(" + (mouseFromCenter.x / 25) * 0.5 + "deg) rotateX(" + ((mouseFromCenter.y / -25) ) + "deg)" });$cardTitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.7) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.65) + "px)"});$cardSubtitle.css({"transform": "translateX(" + ((mouseFromCenter.x / 25) * 0.5) + "px) translateY(" + ((mouseFromCenter.y / 25) * 1.15) + "px) translateZ(60px)"});});
</script>
</html>
第二种：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Playfair+Display:700|Raleway:500.700"><style>body {margin: 40px 0;font-family: "Raleway";font-size: 14px;font-weight: 500;background-color: #BCAAA4;-webkit-font-smoothing: antialiased;}.title {font-family: "Raleway";font-size: 24px;font-weight: 700;color: #5D4037;text-align: center;}p {line-height: 1.5em;}h1 + p, p + p {margin-top: 10px;}.container {padding: 40px 80px;display: flex;flex-wrap: wrap;justify-content: center;}.card-wrap {margin: 10px;transform: perspective(800px);transform-style: preserve-3d;cursor: pointer;}.card-wrap:hover .card-info {transform: translateY(0);}.card-wrap:hover .card-info p {opacity: 1;}.card-wrap:hover .card-info, .card-wrap:hover .card-info p {transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);}.card-wrap:hover .card-info:after {transition: 5s cubic-bezier(0.23, 1, 0.32, 1);opacity: 1;transform: translateY(0);}.card-wrap:hover .card-bg {transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 5s cubic-bezier(0.23, 1, 0.32, 1);opacity: 0.8;}.card-wrap:hover .card {transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);box-shadow: rgba(255, 255, 255, 0.2) 0 0 40px 5px, white 0 0 0 1px, rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset white 0 0 0 6px;}.card {position: relative;flex: 0 0 240px;width: 240px;height: 320px;background-color: #333;overflow: hidden;border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.5) 0 0 0 6px;transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);}.card-bg {opacity: 0.5;position: absolute;top: -20px;left: -20px;width: 100%;height: 100%;padding: 20px;background-repeat: no-repeat;background-position: center;background-size: cover;transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);pointer-events: none;}.card-info {padding: 20px;position: absolute;bottom: 0;color: #fff;transform: translateY(40%);transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);}.card-info p {opacity: 0;text-shadow: black 0 2px 3px;transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1);}.card-info * {position: relative;z-index: 1;}.card-info:after {content: "";position: absolute;top: 0;left: 0;z-index: 0;width: 100%;height: 100%;background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%);background-blend-mode: overlay;opacity: 0;transform: translateY(100%);transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);}.card-info h1 {font-family: "Playfair Display";font-size: 36px;font-weight: 700;text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;}.Original{position: fixed;display: flex;align-items: center;justify-content: space-between;padding: 20% 0 0 80%;width: 100%;z-index: 3;height: 7em;font-family: "Bebas Neue", sans-serif;font-size: clamp(0.66rem, 2vw, 1rem);letter-spacing: 0.5em;}a{color: black;text-decoration: none;}</style>
</head>
<body>
<h1 class="title">Hover over the cards</h1>
<div id="app" class="container"><card data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop="><h1 slot="header">Canyons</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card><card data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="><h1 slot="header">Beaches</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card><card data-image="https://images.unsplash.com/photo-1479644025832-60dabb8be2a1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="><h1 slot="header">Trees</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card><card data-image="https://images.unsplash.com/photo-1479621051492-5a6f9bd9e51a?dpr=2&auto=compress,format&fit=crop&w=1199&h=811&q=80&cs=tinysrgb&crop="><h1 slot="header">Lakes</h1><p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></card>
</div>
<div class="Original"><a href="https://blog.csdn.net/qq_35241329?type=blog">Original By TiMi先生</a></div>
</body>
<script>Vue.config.devtools = true;Vue.component('card', {template: `<div class="card-wrap"@mousemove="handleMouseMove"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"ref="card"><div class="card":style="cardStyle"><div class="card-bg" :style="[cardBgTransform, cardBgImage]"></div><div class="card-info"><slot name="header"></slot><slot name="content"></slot></div></div></div>`,mounted() {this.width = this.$refs.card.offsetWidth;this.height = this.$refs.card.offsetHeight;},props: ['dataImage'],data: () => ({width: 0,height: 0,mouseX: 0,mouseY: 0,mouseLeaveDelay: null }),computed: {mousePX() {return this.mouseX / this.width;},mousePY() {return this.mouseY / this.height;},cardStyle() {const rX = this.mousePX * 30;const rY = this.mousePY * -30;return {transform: `rotateY(${rX}deg) rotateX(${rY}deg)` };},cardBgTransform() {const tX = this.mousePX * -40;const tY = this.mousePY * -40;return {transform: `translateX(${tX}px) translateY(${tY}px)` };},cardBgImage() {return {backgroundImage: `url(${this.dataImage})` };} },methods: {handleMouseMove(e) {this.mouseX = e.pageX - this.$refs.card.offsetLeft - this.width / 2;this.mouseY = e.pageY - this.$refs.card.offsetTop - this.height / 2;},handleMouseEnter() {clearTimeout(this.mouseLeaveDelay);},handleMouseLeave() {this.mouseLeaveDelay = setTimeout(() => {this.mouseX = 0;this.mouseY = 0;}, 1000);} } });const app = new Vue({el: '#app' });
</script>
</html>
相关文章：
分享两组不同的3D VR卡片
最近某音上出现了很多VR视频，转动手机可以看到手机界面未显示出来的场景。这种事情我觉得我们也可以做到。 所以两种不同的3D VR卡片来了： 第一种是横向或上下可以拖动极大的距离。卡片上的信息会随着拖动移动，但不会显示更多的信息&#x…...
外贸人如何精准开发客户？Facebook开发客户全攻略
现在做跨境的都了解的一个社媒平台就是Facebook了，因为很多人都会拿Facebook来开发客户，忙里偷闲，今天东哥就来聊聊用Facebook开发客户的一些心得。 用Facebook开发客户的心得 1、利用关键词搜索 使用行业相关的关键词、产品特定的关键词、相…...
一、Git安装（Git+TortoiseGit图形化）
Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式…...
mysql死锁，如何产生？如何发现？如何处理？
1 产生死锁 就是资源互斥 例子如下 好的，请参考以下 SQL 语句来创建 base_account_item 表和向表中插入一些数据： CREATE TABLE base_account_item (id INT(11) NOT NULL,account_item_name VARCHAR(50) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEF…...
YOLO V1-V3 简单介绍
目录 1. YOLO 2. YOLO V1 3. YOLO V2 4. YOLO V3 5. YOLO V3 SPP网络 5.1 Mosaic 图像增强 5.2 SPP 模块 5.3 CIou Loss 5.4 Focal loss 1. YOLO YOLO 是目标检测任务强大的算法，将目标检测的问题转换边界框和相关概率的回归问题，是目标检测…...
数据结构总结1：了解数据结构、时间复杂度、空间复杂度
后续可能会有补充和更改 目录 一、数据结构 1.算法介绍 二、时间复杂度、空间复杂度 三、练习 1.时间复杂度 2.空间复杂度 一、数据结构 数据结构是计算机存储、组织数据的方式，指相互之间存在一种或多种特定关系的数据元素的集合。 数据结构和数据库的区…...
abstract class和interface有什么区别？
含有abstract修饰符的class即为抽象类，abstract 类不能创建的实例对象。含有abstract方法的类必须定义为abstract class，abstract class类中的方法不必是抽象的。abstract class类中定义抽象方法必须在具体(Concrete)子类中实现，所以…...
Kafka在Java项目中的应用
Kafka在Java项目中的应用 Docker 安装Kafka 一.首先需要安装docker,可看这篇文章安装docker 二.拉取zookeeper和KafKa镜像 docker pull wurstmeister/zookeeperdocker pull wurstmeister/kafkaKafka组件需要向zookeeper进行注册,所以也需要安装zookeeper 三.启动zookeeper…...
理解分布式id生成算法SnowFlake
理解分布式id生成算法SnowFlake 分布式id生成算法的有很多种，Twitter的SnowFlake就是其中经典的一种。 概述 SnowFlake算法生成id的结果是一个64bit大小的整数，它的结构如下图： } public function __construct(){ $this->rnew…...
光纤收发器可以连接光模块吗？
随着科技的进步发展，城市信息化速度的加快，光通信产品在数据中心和安防监控等场景中的运用越来越广泛，而这之间的连接则需要光模块和光纤收发器来实现。很多用户对光模块和光纤收发器的使用有些疑虑，两者该如何连接？又…...
一文快速了解浏览器Sui Explorer
Sui作为一条基于第一原理重新设计和构建而成的L1公链，所有区块和交易信息皆公开透明，每个人都能自行查看。通过Sui链上浏览器，用户可以迅速了解链上的交易情况，比如当前的TPS和Gas价格，也可以使用Digest来查看特定交易…...
python中lambda、yield、map、filter、reduce的使用
1、 匿名函数lambda python中允许使用lambda关键字定义一个匿名函数。所谓的匿名函数就是说使用一次或者几次之后就不再需要的函数，属于“一次性”函数。 #例1：求两数之和 f lambda x, y: x y print(f(5, 1))#例2：求平方和 print((lambda…...
第十八章 使用LNMP架构部署动态网站环境
文章目录 第十八章 使用LNMP架构部署动态网站环境一、源码包程序1、源码包的优势2、基本步骤（1）、下载及解压源码包文件（2）、编译源码包代码（3）、生成二进制安装程序（4）、运行二进制…...
无人值守的IDC机房动环综合运维方案
企业数字化转型以及5G、物联网、云计算、人工智能等新业态带动了数据中心的发展，在国家一体化大数据中心及“东数西算”节点布局的推动下，数据中心机房已成为各大企事业单位维持业务正常运营的重要组成部分，网络设备、系统、业务应用数量与日…...
桌面远程工具推荐
目前市面上的远程工具多如牛毛，很多人不知道怎么选择，下面小编介绍两种桌面远程工具，它们都是跨平台的，均支持Windows，Mac OS，IOS和安卓，分别是RayLink，VNC，好用…...
MySQL高级——第15章_锁
第15章_锁 1. 概述 锁是计算机协调多个进程或线程并发访问某一资源的机制。在程序开发中会存在多线程同步的问题，当多个线程并发访问某个数据的时候，尤其是针对一-些敏感的数据(比如订单、金额等)，我们就需要保证这个数据在任何 时刻最多只…...
【ROS】Ubuntu22.04安装ROS2（Humble Hawksbill）
0、版本说明 Ubuntu22.04对应的ROS2的版本为Humble Hawksbill（ros-humble） 如果不是在Ubuntu22.04中安装ROS，请参考下面Ubuntu和ROS的版本对应关系 1、更新apt包列表 $ sudo apt update2、设置编码 将ubuntu环境语言编码设置为en_US en_…...
【ChatGPT】体验一下ChatGPT
体验一下ChatGPT 可以帮你写代码、写邮件、编故事的神器 最近OpenAI 发布了备受期待的原型通用 ChatGPT，这是一种基于对话的 AI 聊天界面，算是GPT-3(Generative Pre-trained Transformer 3)的继承者，今天记录一下体验的过程，以前…...
Android 串口通信
可以使用开源usb-serial-for-android 库进行串口通信 添加 usb-serial-for-android 依赖项到项目中。在项目的 build.gradle 文件中添加以下内容： dependencies {// 其他依赖项...implementation com.github.mik3y:usb-serial-for-android:3.5.1// 其他依赖项... …...
Python3 日期和时间
Python 3 提供了强大的日期和时间处理模块，名为 datetime。它可以用于执行日期和时间的各种操作，包括创建、格式化、比较和计算等。 下面是一些常用的日期和时间操作的示例： ### 获取当前日期和时间 要获取当前日期和时间，可以使…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要：设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP（Work-in-Progress）弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中，设立专门的紧急任务通道尤为重要，这能…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台
🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代，加密货币作为一种新兴的金融现象，正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而，加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下，稳定…...
数学建模-滑翔伞伞翼面积的设计，运动状态计算和优化 ！
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态，并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...