class Main {
public static void main(String[] args) {
//JSRUN引擎2.0,支持多达30种语言在线运行,全仿真在线交互输入输出。
System.out.println("Hello world! - java.jsrun.net ");
}
}<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>梦幻卡通置物架设计</title>
<style>
:root {
--main-color: #ff99cc;
--accent-color: #a6e3ff;
--metal-color: linear-gradient(45deg, #ffd700, #ff69b4);
}
body {
background: linear-gradient(135deg, #f8f4ff, #ffe6f4);
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
.multi-view {
display: flex;
gap: 30px;
margin-bottom: 40px;
}
.view {
background: rgba(255,255,255,0.9);
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.d3-container {
perspective: 1000px;
width: 300px;
height: 300px;
}
.d3-shelf {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotate 15s infinite linear;
}
#front-view { width: 300px; height: 400px; }
#side-view { width: 150px; height: 400px; }
#top-view { width: 300px; height: 150px; }
.shelf {
background: var(--main-color);
border: 3px solid white;
position: absolute;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
background-image: url('https://example.com/cartoon-pattern.png');
background-size: cover;
}
.face {
position: absolute;
border: 2px solid white;
background: var(--accent-color);
backface-visibility: visible;
}
.support {
background: var(--metal-color);
width: 15px;
position: absolute;
box-shadow: 0 0 10px rgba(255,105,180,0.5);
}
.dimension {
border-left: 2px dashed #ff69b4;
position: absolute;
color: #ff1493;
font-weight: bold;
}
@keyframes rotate {
0% { transform: rotateY(0deg) rotateX(-10deg); }
100% { transform: rotateY(360deg) rotateX(-10deg); }
}
.deco-girl {
position: absolute;
width: 80px;
height: 120px;
background: url('https://example.com/anime-girl.png');
background-size: contain;
z-index: 10;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3));
}
</style>
</head>
<body>
<div class="multi-view">
<div class="view" id="front-view">
<div class="shelf" style="top:50px; left:50px; width:200px; height:25px;"></div>
<div class="support" style="left:50px; height:300px;"></div>
<div class="support" style="right:50px; height:300px;"></div>
<div class="deco-girl" style="right:10px; bottom:0;"></div>
</div>
<div class="view" id="side-view">
<div class="shelf" style="top:50px; width:120px; height:25px;"></div>
<div class="support" style="left:30px; height:250px;"></div>
</div>
<div class="view" id="top-view">
<div class="shelf" style="left:50px; top:50px; width:200px; height:25px;"></div>
</div>
</div>
<div class="d3-container">
<div class="d3-shelf">
<div class="face" style="transform: translateZ(50px); width:200px; height:300px;"></div>
<div class="face" style="transform: rotateY(90deg) translateZ(100px); width:200px; height:300px;"></div>
<div class="face" style="transform: rotateX(90deg) translateZ(150px); width:200px; height:200px;"></div>
<div class="deco-girl" style="transform: translateZ(80px);"></div>
</div>
</div>
</body>
</html>