<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
perspective: 800px;
text-align:center;
}
.stage {
position: relative;
width: 200px;
height: 200px;
margin: 400px auto;
box-shadow: 0 0 15px #000 inset;
transform-style: preserve-3d;
transition: 2s;
}
.stage:hover {
transform: rotateY(180deg);
}
.stage:hover .face5 {
transform: translateZ(100px) translateY(-200px);
}
.stage:hover .small1 {
transform: translateZ(100px) translateY(-300px);
}
.stage:hover .small2 {
transform: rotateY(180deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small3 {
transform: rotateY(-90deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small4 {
transform: rotateY(90deg) translateZ(100px) translateY(-300px);
}
.stage:hover .small5 {
transform: rotateX(90deg) translateZ(400px);
}
.stage:hover .small6 {
transform: rotatex(-90deg) translateZ(-200px);
}
.face {
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0 0 20px #554ee9 inset;
transition: 2s;
}
.small {
position: absolute;
right: 50px;
bottom: 0px;
width: 100px;
height: 100px;
box-shadow: 0 0 5px #000 inset;
transition: 2s;
}
.face1 {
transform: translateZ(100px);
}
.face2 {
transform: rotateY(180deg) translateZ(100px);
}
.face3 {
transform: rotateY(-90deg) translateZ(100px);
}
.face4 {
transform: rotateY(90deg) translateZ(100px);
}
.face5 {
transform: rotateX(90deg) translateZ(100px);
}
.face6 {
transform: rotatex(-90deg) translateZ(100px);
}
.small1 {
transform: translateZ(50px);
}
.small2 {
transform: rotateY(180deg) translateZ(50px);
}
.small3 {
transform: rotateY(-90deg) translateZ(50px);
}
.small4 {
transform: rotateY(90deg) translateZ(50px);
}
.small5 {
transform: rotateX(90deg) translateZ(50px);
}
.small6 {
transform: rotatex(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="stage">
<div class="face1 face">前</div>
<div class="face2 face">后</div>
<div class="face3 face">左</div>
<div class="face4 face">右</div>
<div class="face5 face">上</div>
<div class="face6 face">下</div>
<div class="small1 small">前</div>
<div class="small2 small">后</div>
<div class="small3 small">左</div>
<div class="small4 small">右</div>
<div class="small5 small">上</div>
<div class="small6 small">下</div>
</div>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性