前端 CSS 经典:3D Hover Effect 效果

news2024/11/23 7:01:01

前言:有趣的 3D Hover Effect 效果,通过 js 监听鼠标移动,动态赋值 rotateX,rotateY 的旋转度来实现。

效果图:

代码实现:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>document</title>
    <style>
      body {
        background: #000;
      }
      .card {
        margin: 200px auto;
        width: 400px;
        border-radius: 10px;
        transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
        transition: 0.3s;
      }
      .card img {
        width: 100%;
        border-radius: inherit;
      }
      .card:hover {
        box-shadow: -3px -3px 10px #54a29e, 3px 3px 10px #a79d66;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <img src="img.jpg" />
    </div>
    <script>
      const card = document.querySelector(".card");
      const yRange = [-10, 10];
      const xRange = [-10, 10];
      function getRotateDeg(range, value, length) {
        return (value / length) * (range[1] - range[0]) + range[0];
      }
      card.onmousemove = (e) => {
        const { offsetX, offsetY } = e;
        const { offsetWidth, offsetHeight } = card;
        const ry = -getRotateDeg(yRange, offsetX, offsetHeight);
        const rx = getRotateDeg(xRange, offsetY, offsetWidth);

        card.style.setProperty("--rx", `${rx}deg`);
        card.style.setProperty("--ry", `${ry}deg`);
        console.log(rx, ry);
      };
      card.onmouseleave = () => {
        card.style.setProperty("--rx", 0);
        card.style.setProperty("--ry", 0);
      };
    </script>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1789226.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【NoSQL数据库】Redis简介

Redis Redis简介 Redis关系型数据库和非关系型数据库Redis 简介redis速度快的原因 Redis 配置Linux 源码安装redis命令工具 关系型数据库和非关系型数据库 关系型数据库&#xff08;Relational Database&#xff09;和非关系型数据库&#xff08;Non-Relational Database&…

在仓库新建分支之后,Vscode里面看不到

问题描述 在仓库新建了分支 但是在Vscode里面看不到这个新建的分支 解决 参考文章&#xff1a;http://t.csdnimg.cn/V92a3 在终端输入&#xff1a;git remote update origin --prune 命令解释 git remote update origin --prune 是一个 Git 命令&#xff0c;用于更新远程…

小猪APP分发:让APP封装变得如此简单

你是否曾经在开发完一款APP后&#xff0c;为了封装、分发而头疼不已&#xff1f;别担心&#xff0c;小猪APP分发来拯救你了&#xff01;这款神器不仅能让你的工作变得更加高效&#xff0c;还能让你的APP在各大平台上顺利分发。 小猪APP封装www.ppzhu.net APP封装的挑战 开发一…

Python3.9及以上Pyinstaller 反编译教程(exe转py)

文章目录 前言1.使用pyinstxtractor.py将exe文件转换成pyc文件2.给pyc文件添加文件头3.使用pycdc工具反编译pyc文件&#xff0c;获得源码 前言 经常使用pyinstaller将一些写的python程序打包成了各种exe&#xff0c;时间一长&#xff0c;源码丢失&#xff0c;为了恢复一部分源…

学习Python我能做些什么了?你真的了解了嘛?

工欲善其事&#xff0c;必先利其器。学习不是盲目的&#xff0c;是有目标性的。所以&#xff0c;在学习之前充分了解自己所学技能的前景&#xff0c;学完能做什么&#xff0c;大概地薪资待遇是很有必要的。 Python作为人工智能的重要编程语言&#xff0c;无论发展前景还是就业…

【文末附gpt升级秘笈】Suno全新功能在音乐创作领域的应用与影响

Suno全新功能在音乐创作领域的应用与影响 摘要&#xff1a; 随着科技的飞速发展&#xff0c;人工智能与音乐创作的结合日益紧密。本文旨在探讨Suno全新功能——即兴哼唱创作与声音模仿——在音乐创作领域的应用与影响。通过深入分析这一技术的原理、特点及其在音乐创作中的实际…

Linux 系统怎么快速「批量重命名」文件

如果需要对文件批量重命名&#xff0c;怎么办&#xff0c;是不是要找个工具&#xff0c;下载看这么使用。其实在 Linux、macOS 系统上使用脚本可以轻松搞定。 如&#xff0c;这里有一批图片文件&#xff0c;后缀名可能是jpg、jpeg、png 等&#xff0c;名称如 “我是待重命名的…

uniPush2.0消息推行(云对象)

1.创建uniCloud云开发环境 关联云服务空间&#xff08;没有云空间到官网上创建&#xff09;步骤如下 2. index.obj.js代码 &#xff0c;然后上传部署 // 云对象教程: https://uniapp.dcloud.net.cn/uniCloud/cloud-obj // jsdoc语法提示教程&#xff1a;https://ask.dc…

6.6高算力开发套件深度解读 | 2024高通边缘智能创新应用大赛公开课

2024高通边缘智能创新应用大赛系列公开课即将迎来激动人心的收官之作&#xff01; 美格智能新技术研究院李书杰将在本次直播中带来一场关于边缘智能模组与开发技术的专业分享盛宴&#xff0c;深入剖析高算力开发套件的独特魅力和核心亮点。 锁定6月6日晚上8点&#xff0c;直播…

通配符https数字证书260

随着越来越多的人开始使用互联网&#xff0c;互联网上的信息变得繁杂&#xff0c;用户很难识别网站信息的真实性&#xff0c;为了维护互联网的环境&#xff0c;开发者开始使用https证书对网站传输数据进行加密和身份认证&#xff0c;以此来保护用户的隐私以及标示网站的真实性。…

带池化注意力 Strip Pooling | Rethinking Spatial Pooling for Scene Parsing

论文地址:https://arxiv.org/abs/2003.13328 代码地址:https://github.com/houqb/SPNet 空间池化已被证明在捕获像素级预测任务的长距离上下文信息方面非常有效,如场景解析。在本文中,我们超越了通常具有N N规则形状的常规空间池化,重新思考空间池化的构成,引入了一种…

智能分析设备助力废固运输车辆信息采集

进出车辆信息采集&#xff0c;这一环节可谓是整个废固生产及处理企业监管体系中的基石。前端摄像机以其敏锐的感知能力&#xff0c;精准捕捉废固运输车辆的车牌、车头、车尾以及车厢的细致画面&#xff0c;同时记录下对应的视频流信息。这些信息的采集不仅为后续的监管提供了详…

掘金AI 商战宝典-高阶班:如何用AI制作视频(11节视频课)

课程目录&#xff1a; 1-第一讲用AI自动做视频&#xff08;上&#xff09;_1.mp4 2-第二讲用AI自动做视频&#xff08;中&#xff09;_1.mp4 3-第四讲A1做视频实战&#xff1a;店铺宣传_1.mp4 4-第五讲Al做视频实战&#xff1a;商品带贷1.mp4 5-第六讲Al做视频实战&#x…

在618集中上新,蕉下、VVC们为何押注拼多多?

编辑&#xff5c;Ray 自前两年崛起的防晒产品&#xff0c;今年依旧热度不减。 头部品牌蕉下&#xff0c;2020年入驻拼多多&#xff0c;如今年销售额已过亿元。而自去年起重点押注拼多多的时尚防晒品牌VVC&#xff0c;很快销量翻番。这两家公司&#xff0c;不约而同在618之前上…

Windows下使用Airsim+QGC进行PX4硬件在环HITL(一)

Windows下使用AirsimQGC进行PX4硬件在环HITL This tutorial will guide you through the installation of Airsim and QGC on Windows, so that the hardware-in-the-loop experiment can be conducted. Hardware-in-the-Loop (HITL or HIL) is a simulation mode in which nor…

TechM-技术网站

介绍 你将为⼀个技术社区设计并实现⼀个官⽹。该社区旨在为软件⼯程师、开发⼈员和技术 爱好者提供⼀个交流平台&#xff0c;分享最新的技术动态、⽂章、项⽬案例。 项目模块 项目分为三个模块 &#xff1a; 主页展示模块&#xff0c;文章详情模块&#xff0c;文章专栏模块…

ChatTTS改良版 - 新增分角色朗读功能、音色抽卡功能以及生成长音频

这个版本是ChatTTS的一个分支&#xff0c;基于ChatTTS修改&#xff0c;由6drf21e大佬改良&#xff0c;大佬GitHub地址 https://github.com/6drf21e/ChatTTS_colab 支持本地一键运行&#xff0c;同时支持colab运行。最大的亮点还要属“角色扮演”了&#xff0c;可以用一段剧情或…

消费者api编写教程

1.基本属性配置 输入new Properties().var 回车 //创建属性Properties properties new Properties();//连接集群properties.put(ConsumerConfig.BOOTSTRAP_SERVERS_CONFIG,"node1:9092,node2:9092");//反序列化properties.put(ConsumerConfig.KEY_DESERIALIZER_CL…

AI-PDF 摘要器推荐10个爆款:效率翻倍,省时省力的秘密武器

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

Excel中高级筛选多个条件怎么做?

高级筛选关键点就在条件设置&#xff0c;筛选条件可以设置多行多列&#xff0c;同一行之间的条件是“并且”的关系&#xff0c;同一列之间的条件是“或者”的关系。 我们以筛选厂家通用、大众&#xff0c;在北京、上海、成都&#xff0c;1月的数据为例来演示条件设置 一、按字…