前端html+css： 3D滚动正方体————按住鼠标左键即可拖动

最新推荐文章于 2025-03-09 17:00:33 发布

静静静静静rj

最新推荐文章于 2025-03-09 17:00:33 发布

阅读量1.6k

点赞数 1

分类专栏： html css JS 文章标签： css js jquery html

本文链接：https://blog.youkuaiyun.com/renjingzhaozhao/article/details/105380967

版权

这篇博客展示了如何使用HTML和CSS创建一个3D滚动正方体，并允许用户通过按住鼠标左键进行拖动交互。内容包括相关代码示例，以及一系列前端特效如鼠标跟随、星空背景等。作者还提供了其他前端项目的链接，并在咸鱼上出售相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图所示

代码如下

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	h3{
	text-align: center;
	color: #5A5A5A;
}
		body{
			background: #000;
		}
		#box{
			width: 200px;
			height: 200px;
			margin:150px auto;
			background: #ccc;
			position: relative;
			transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
			transform-style:preserve-3d;
		}
		#box div{
			width:100%;
			height:100%;
			position: absolute;
			top:0;
			left: 0;
			background-size:cover; 
			-webkit-box-shadow:0 0 100px #5fbcff;
			opacity: .8;
		}
		.front{
			transform:translateZ(100px);
			background: url(images/a5.png);