https://tedfactory.com/tags/3d/Recent content in 3D on Ted FactoryHugokoSat, 07 Mar 2026 15:25:36 +0900https://tedfactory.com/widgets/3d-tetris-box/Sat, 07 Mar 2026 00:00:00 +0900https://tedfactory.com/widgets/3d-tetris-box/<h1 id="3d-tetris-box">3D Tetris Box<a class="anchor" href="#3d-tetris-box">#</a></h1> <style> .tt3-wrap { position: relative; width: 100%; max-width: 1100px; margin: 28px auto; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: #10131b; } .tt3-wrap *, .tt3-wrap *::before, .tt3-wrap *::after { box-sizing: border-box; } .tt3-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr); align-items: stretch; gap: 12px; margin: 0 0 14px; padding: 12px; border: 1px solid rgba(43, 52, 69, 0.12); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(238, 243, 250, 0.86)); } .tt3-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 8px 6px; } .tt3-hero-text { margin: 0; font-size: 14px; line-height: 1.65; color: #38465e; } .tt3-hero-text-mobile { display: none; } .tt3-hero-image-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(43, 52, 69, 0.12); background: rgba(230, 236, 246, 0.7); max-height: 180px; } .tt3-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; } .tt3-shell { background: linear-gradient(180deg, #f5f7fb 0%, #e9edf5 100%); border: 1px solid rgba(43, 52, 69, 0.12); border-radius: 22px; box-shadow: 0 24px 60px rgba(28, 36, 51, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8); overflow: hidden; } .tt3-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 243, 250, 0.92)); border-bottom: 1px solid rgba(43, 52, 69, 0.1); } .tt3-card { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.74); border: 1px solid rgba(43, 52, 69, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } .tt3-label { display: block; font-size: 12px; letter-spacing: 0.08em; color: #697589; margin-bottom: 6px; } .tt3-value { font-size: 28px; font-weight: 800; line-height: 1; color: #10131b; } .tt3-layout { display: grid; grid-template-columns: minmax(0, 720px) 270px; justify-content: center; align-items: stretch; gap: 18px; padding: 18px; } .tt3-stage { position: relative; width: 100%; align-self: start; min-width: 0; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #dfe4ee 0%, #cfd7e5 100%); border: 1px solid rgba(43, 52, 69, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); } .tt3-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; cursor: pointer; } .tt3-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(18, 23, 34, 0.34); backdrop-filter: blur(3px); } .tt3-panel { width: min(100%, 460px); padding: 24px 26px; border-radius: 20px; background: rgba(252, 253, 255, 0.92); border: 1px solid rgba(43, 52, 69, 0.12); box-shadow: 0 26px 60px rgba(7, 12, 22, 0.28); text-align: center; } .tt3-panel h2 { margin: 0 0 10px; font-size: 30px; color: #10131b; } .tt3-panel p { margin: 8px 0; color: #4a5568; line-height: 1.6; font-size: 15px; } .tt3-btn-row { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .tt3-btn { border: none; border-radius: 999px; padding: 12px 20px; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease; } .tt3-btn:hover { transform: translateY(-1px); } .tt3-btn:active { transform: translateY(0); } .tt3-btn-primary { color: #fff; background: linear-gradient(135deg, #4f46e5, #06b6d4); box-shadow: 0 12px 24px rgba(79, 70, 229, 0.28); } .tt3-btn-secondary { color: #1d2738; background: rgba(230, 235, 244, 0.95); box-shadow: 0 10px 20px rgba(43, 52, 69, 0.1); } .tt3-flash { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(16, 19, 27, 0.84); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; } .tt3-flash.show { opacity: 1; transform: translateX(-50%) translateY(10px); } .tt3-side { align-self: stretch; display: grid; grid-template-rows: minmax(165px, 0.72fr) minmax(320px, 1.28fr); gap: 14px; min-height: 0; } .tt3-side-card { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(43, 52, 69, 0.1); min-height: 0; } .tt3-side-card h3 { margin: 0 0 12px; font-size: 15px; color: #10131b; } .tt3-preview { display: block; width: 100%; height: 100%; flex: 1 1 auto; min-height: 140px; border-radius: 14px; background: linear-gradient(180deg, #eff3f9 0%, #dde4f0 100%); border: 1px solid rgba(43, 52, 69, 0.08); } .tt3-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; } .tt3-control-group { display: flex; flex-direction: column; gap: 10px; } .tt3-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(241, 244, 250, 0.94); color: #273244; font-size: 13px; } .tt3-key code { min-width: 28px; padding: 4px 8px; border-radius: 8px; background: #10131b; color: #fff; text-align: center; font-weight: 700; } .tt3-note { margin-top: auto; padding-top: 12px; font-size: 13px; color: #586579; line-height: 1.6; } .tt3-note-mobile { display: none; } .tt3-mobile-controls { display: none; } .tt3-mobile-column { display: flex; flex-direction: column; gap: 10px; } .tt3-mobile-rotate { display: grid; grid-template-columns: 1fr; gap: 10px; } .tt3-mobile-move { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; } .tt3-mobile-spacer { min-height: 44px; } .tt3-mobile-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border: none; border-radius: 14px; background: linear-gradient(180deg, #f4f7fb 0%, #e8edf6 100%); color: #111827; font-size: 20px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 18px rgba(43, 52, 69, 0.08); cursor: pointer; touch-action: manipulation; } .tt3-mobile-btn:active { transform: translateY(1px) scale(0.98); } .tt3-mobile-btn-rotate { font-size: 18px; letter-spacing: 0.04em; } .tt3-next-card { gap: 12px; } .tt3-next-title-mobile { display: none; } .tt3-footer { padding: 0 18px 18px; color: #586579; font-size: 14px; line-height: 1.7; } .tt3-footer-desktop { display: none; } .tt3-footer-mobile { display: none; } .tt3-footer p { margin: 0; } .tt3-footer p + p { margin-top: 10px; } @media (max-width: 980px) { .tt3-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tt3-layout { grid-template-columns: 1fr; } .tt3-side { grid-template-rows: auto auto; } } @media (max-width: 720px) { .tt3-hero { grid-template-columns: 1fr; margin-bottom: 10px; padding: 10px; gap: 10px; } .tt3-hero-text-desktop { display: none; } .tt3-hero-text-mobile { display: block; } .tt3-hero-image-wrap { max-height: 120px; } .tt3-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tt3-canvas { aspect-ratio: 5 / 4; } .tt3-layout, .tt3-hud, .tt3-footer { padding-left: 14px; padding-right: 14px; } .tt3-layout { padding-top: 14px; padding-bottom: 14px; } .tt3-panel { padding: 20px 18px; } .tt3-footer-desktop { display: none; } .tt3-footer-mobile { display: block; } .tt3-side { gap: 12px; } .tt3-preview { height: 98px; min-height: 98px; flex: none; } .tt3-next-card { flex-direction: row; align-items: stretch; gap: 12px; } .tt3-next-card h3 { flex: 0 0 84px; margin: 0; display: flex; align-items: center; font-size: 17px; font-weight: 800; line-height: 1.05; } .tt3-next-title-desktop { display: none; } .tt3-next-title-mobile { display: inline; } .tt3-next-card .tt3-preview { width: auto; flex: 1 1 auto; } .tt3-control-card h3, .tt3-control-card .tt3-controls, .tt3-control-card .tt3-note-desktop { display: none; } .tt3-control-card { padding: 14px; } .tt3-mobile-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 12px; align-items: stretch; } .tt3-note-mobile { display: block; margin-top: 12px; padding-top: 0; } } </style> <div class="tt3-wrap" id="tt3-game"> <div class="tt3-hero"> <div class="tt3-hero-copy"> <p class="tt3-hero-text tt3-hero-text-desktop">눈앞의 <code>6 x 6 x 15</code> 상자 안으로 3차원 블록이 천천히 밀려 들어갑니다. 데스크톱에서는 <code>I / J / K / L</code>로 평면 이동, <code>F / D / S</code>로 회전, <code>A</code>로 빠른 내리기를 사용합니다.</p>