用 CSS 玩转 3D 等距设计：一个会跟着鼠标动的立方体 - Silvana

你好，我是 Silvana，一名前端开发。

这里记录我写过的代码、做过的项目，以及一些真实想法。

最近捣鼓了个有意思的小效果 —— 纯 CSS 实现的 3D 等距立方体，鼠标在页面上移动时，立方体还能跟着转动，视觉上既有层次感又不复杂。先放个效果动图直观感受下👇

一、先搭 HTML 骨架：简单到只有一个 “盒子”

整个效果的 HTML 结构特别直观，核心就是一个承载 3D 效果的box容器，里面嵌套了立方体的四个侧面，每个侧面放对应的文字内容就行。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <!-- 适配移动端，保证小屏也能正常显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS创意等距设计</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- 3D立方体的外层容器，所有3D变换都基于这个盒子 -->
  <div id="box">
    <!-- 立方体的侧面容器，包裹四个不同角度的侧面 -->
    <div>
      <!-- 第一个侧面：旋转0度，对应立方体正面 -->
      <span>
        <div class="container">
          <div class="side">
            <h2>CSS</h2>
            <h3>Isometric</h3>
            <h4>Design</h4>
          </div>
        </div>
      </span>
      <!-- 第二个侧面：旋转90度，对应立方体右侧面 -->
      <span>
        <div class="container">
          <div class="side">
            <h2>CSS</h2>
            <h3>Isometric</h3>
            <h4>Design</h4>
          </div>
        </div>
      </span>
      <!-- 第三个侧面：旋转180度，对应立方体背面 -->
      <span>
        <div class="container">
          <div class="side">
            <h2>CSS</h2>
            <h3>Isometric</h3>
            <h4>Design</h4>
          </div>
        </div>
      </span>
      <!-- 第四个侧面：旋转270度，对应立方体左侧面 -->
      <span>
        <div class="container">
          <div class="side">
            <h2>CSS</h2>
            <h3>Isometric</h3>
            <h4>Design</h4>
          </div>
        </div>
      </span>
    </div>
  </div>
  <!-- 鼠标交互的JS代码 -->
  <script>
  </script>
</body>
</html>

二、CSS 样式：调对 3D 变换才有质感

这个效果的核心全在 CSS 里，尤其是transform-style: preserve-3d（保留 3D 空间）、rotateX/rotateY（3D 旋转）和translate3d（3D 位移），我把关键样式拆出来，每一步都标了注释，一看就懂。

/* 全局重置：清除默认边距，盒模型设为border-box（宽高包含边框/内边距） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 页面主体：居中显示，背景色设为浅蓝，最小高度占满屏幕 */
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #80c7ff;
}
/* 3D立方体外层容器：开启3D空间，设置宽高 */
#box {
  position: relative;
  width: 260px;
  height: 340px;
  transform-style: preserve-3d; /* 关键：保留子元素的3D变换效果 */
}
/* 立方体的“顶面”：通过rotateX旋转90度，模拟3D顶面，加模糊增加层次感 */
#box::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  background: #fff;
  transform: rotateX(90deg) translateZ(130px); /* 旋转+位移，定位到立方体顶部 */
  filter: blur(4px); /* 轻微模糊，模拟光影效果 */
}
/* 立方体的“底面阴影”：同理旋转，加半透明黑色模拟阴影 */
#box::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  background: rgba(0,0,0,0.15);
  transform: rotateX(90deg) translateZ(-260px); /* 位移到立方体底部，模拟阴影 */
}
/* 立方体侧面的父容器：继承3D空间属性 */
#box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
/* 每个侧面的基础样式：居中显示内容，继承3D空间 */
#box div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 第一个侧面：旋转0度，作为立方体正面 */
#box div span:nth-child(1){
  transform: rotateY(0deg) translate3d(0,0,130px); /* 沿Y轴旋转0度，向Z轴位移130px（立方体边长的一半） */
  background: #f1f1f1;
}
/* 第二个侧面：旋转90度，作为立方体右侧面 */
#box div span:nth-child(2){
  transform: rotateY(90deg) translate3d(0,0,130px);
  background: #f8f8f8;
}
/* 第三个侧面：旋转180度，作为立方体背面 */
#box div span:nth-child(3){
  transform: rotateY(180deg) translate3d(0,0,130px);
  background: #ededed;
}
/* 第四个侧面：旋转270度，作为立方体左侧面 */
#box div span:nth-child(4){
  transform: rotateY(270deg) translate3d(0,0,130px);
  background: #f7f7f7;
}
/* 文字容器：居中对齐 */
#box div span .container {
  text-align: center;
}
#box div span .container .side{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 文字样式：垂直排版（writing-mode: vertical-lr），增强3D立方体的视觉效果 */
#box div span .container .side h2{
  font-size: 5em;
  writing-mode: vertical-lr; /* 文字垂直排列 */
  text-orientation: upright; /* 文字直立显示 */
  font-weight: 700;
  line-height: 1.2em;
  color: #0e2f56;
}
#box div span .container .side h3{
  font-size: 2.7em;
  text-transform: uppercase; /* 字母大写 */
  writing-mode: vertical-lr;
  color: #fff;
  letter-spacing: .12em;
  background: #0e2f56;
  padding-top: 20px;
  padding-bottom: 10px;
  font-weight: 300;
}
#box div span .container .side h4{
  font-size: 2.2em;
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-transform: uppercase;
  line-height: 2em;
  color: #0e2f56;
}

三、几行 JS 搞定：鼠标交互效果

交互逻辑就监听鼠标移动事件，获取鼠标的 X 轴坐标，动态修改立方体的rotateY值，再固定rotateX为 - 30 度，让立方体保持等距视角，鼠标一动就有反馈，手感刚好。

// 获取3D立方体的DOM元素
var box = document.getElementById("box");
// 监听全局鼠标移动事件
window.onmousemove = function(e) {
  // e.clientX：鼠标相对于浏览器可视区的X坐标
  // rotateX(-30deg)：固定立方体的上下角度，保持等距视觉
  // rotateY(${e.clientX}deg)：让立方体跟着鼠标X轴旋转
  box.style.transform = `rotateX(-30deg) rotateY(${e.clientX}deg)`
}

写着写着就到了结尾，祝您今晚有个好梦（代码少报错一点）。

本文由mdnice多平台发布

posted on 2026-01-23 11:22 Silvana 阅读(7) 评论(0) 收藏举报

刷新页面返回顶部