前端实战小案例--根据鼠标位置而变化的卡片3D视差效果

最新推荐文章于 2024-01-30 00:54:17 发布

原创

最新推荐文章于 2024-01-30 00:54:17 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍了一种利用CSS和JavaScript实现的3D视差效果，通过跟踪鼠标位置使页面上的卡片产生动态倾斜，增强用户体验。代码简洁，适用于前端开发者实践。

前端实战小案例--根据鼠标位置而变化的卡片3D视差效果

想练习更多前端案例，请进个人主页，点击前端实战案例->传送门

觉得不错的记得点个赞?支持一下我0.0！谢谢了！

不积跬步无以至千里，不积小流无以成江海。

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.main{
				width: 400px;
				height: 500px;
				perspective: 1000px;
				transform-style: preserve-3d;
				transform-origin: 0 0;
			}
			.container{
				/* css定义变量的方式 */
				--X: 0;
				--Y: 0;
				position: relative;
				width: 400px;
				height: 500px;
				bac