<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
--primary:#C1D1E2;
}
.container{
width:200px;
aspect-ratio: 1/2.1;
perspective: 1000px; /* 观察者距离 */
}
phone{
width: 100%;
height: 100%;
position: relative;
display: block;
transform-style: preserve-3d; /* 子元素（面）共享 3D 空间 */
>div{
position: absolute;
width: 200px;
height: 416px;
color: white;
font-weight: bold;
display: block;
align-items: center;
justify-content: center;
backface-visibility: hidden;
background: var(--primary);
border:1px solid #999;
}
/* 初始角度 */
transform: rotateY(-10deg) rotateX(60deg);
}
.front {
transform: translateZ(9px); /* 前面：向 Z 轴正方向移动（靠近观察者） */
background: pink;
}
.screen {
width:100%;
padding:3px;
font-size: 10px;
transform: translateZ(10px); /* 前面：向 Z 轴正方向移动（靠近观察者） */
background: #000;
animation: move 5s linear infinite alternate forwards;
}
@keyframes move{
0% { transform: translateZ(11px) }
100% { transform: translateZ(60px) }
}
.back {
transform: translateZ(-10px) rotateY(180deg); /* 后面：远离观察者 + 旋转 180°（文字正向） */
.camera{
position: absolute;
width:38px;
aspect-ratio: 1;
background: #000;
border-radius: 50%;
border:3px solid #fff;
&:nth-child(1){
top:14px;
left:14px;
}
&:nth-child(2){
top:62px;
left:14px;
}
&:nth-child(3){
top:110px;
left:14px;
}
}
}
.left {
width:20px;
transform: translateX(-10px) rotateY(-90deg); /* 左面：向左移动 + 沿 Y 轴旋转 -90° */
}
.right {
width:20px;
transform: translateX(190px) rotateY(90deg); /* 右面：向右移动 + 沿 Y 轴旋转 90° */
}
.top {
height:20px;
transform: translateY(-10px) rotateX(90deg); /* 顶面：向上移动 + 沿 X 轴旋转 90° */
}
.bottom {
height:20px;
transform: translateY(406px) rotateX(-90deg); /* 底面：向下移动 + 沿 X 轴旋转 -90° */
}
</style>
</head>
<body>
<div class="container">
<phone id="phone">
<div class="front">
</div>
<div class="screen">
<code>Initialize the mobile phone system</code><br/>
<code>初始化成功</code><br/>
<code>Loading core components...</code><br/>
<p>[########...]75%</p>
</div>
<div class="back">
<div class="camera"></div>
<div class="camera"></div>
<div class="camera"></div>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</phone>
</div>
<script>
let currentRotateX = 30; // 初始X轴旋转角度（俯视）
let currentRotateY = 60; // 初始Y轴旋转角度（左右）
const sensitivity = 0.3; // 视角灵敏度（值越小越慢，越大越快）
const centerX = window.innerWidth / 2; // 页面水平中心
const centerY = window.innerHeight / 2; // 页面垂直中心
const container = document.querySelector('phone');
// 鼠标移动事件：根据鼠标位置计算旋转角度
document.addEventListener('mousemove', (e) => {
// 计算鼠标相对于页面中心的偏移量（正负值对应不同方向）
const offsetX = e.clientX - centerX;
const offsetY = e.clientY - centerY;
// 根据偏移量更新旋转角度：鼠标在中心时无旋转，偏离中心时逐步旋转
currentRotateY = 60 + (offsetX * sensitivity); // X偏移控制Y轴旋转（左右视角）
currentRotateX = 30 - (offsetY * sensitivity); // Y偏移控制X轴旋转（上下视角）
// 限制X轴旋转范围（0°=正视，90°=完全俯视），避免过度翻转
currentRotateX = Math.max(0, Math.min(90, currentRotateX));
// 应用3D旋转
container.style.transform = `rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
});
</script>
</body>
</html>
index.html
index.html