[css] 用css3画出一个立体魔方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>立方体</title>
<style>
.box{
width: 300px;
height: 300px;
margin: 100px auto;
perspective: 500px;
}
.con{
position:relative;
width:300px;
height:300px;
transform-style:preserve-3d;
transform-origin:50% 50% -150px;
animation:rotate 4s infinite;
}
.con .side{
position:absolute;
width:300px;
height:300px;
font-size:44px;
line-height: 300px;
text-align: center;
}
.con .before{
background-color: rgba(0,0,0,0.4);
}
.con .left{
background-color: rgba(255,0,0,0.4);
left:-300px;
top:0;
transform:rotateY(-90deg);
transform-origin:right;
}
.con .right{
background-color: rgba(255,255,0,0.4);
left:300px;
top:0;
transform:rotateY(90deg);
transform-origin:left;
}
.con .top{
background-color: rgba(0,255,0,0.4);
left:0;
top:-300px;
transform:rotateX(90deg);
transform-origin:bottom;
}
.con .bottom{
background-color: rgba(0,0,255,0.4);
left:0;
top:300px;
transform:rotateX(-90deg);
transform-origin:top;
}
.con .back{
background-color: rgba(200,122,0,0.4);
transform:translateZ(-300px);
}
@keyframes rotate{
0%{
transform:rotateX(0) rotateY(0);
}
50%{
transform:rotateX(0) rotateY(360deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<div class="side before">前</div>
<div class="side back">后</div>
<div class="side top">上</div>
<div class="side bottom">下</div>
<div class="side left">左</div>
<div class="side right">右</div>
</div>
</div>
</body>
</html>
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库