แปลงฟรี
คิวบ์ 3D CSS เครื่องกำเนิดไฟฟ้า
สร้างภาพเคลื่อนไหวลูกบาศก์ 3D CSS ด้วยสี ขนาด และเอฟเฟกต์ที่กำหนดเอง คัดลอกโค้ด HTML และ CSS ที่สร้างขึ้นทันที
ความหนา: 0px
ดูตัวอย่าง
รหัสที่สร้างขึ้น
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D CSS Cube</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background: #1a1a2e;
}
@keyframes cubeRotateY {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(0deg) rotateY(360deg); }
}
/* Cube Scene */
.cube-scene {
perspective: 800px;
width: 120px;
height: 120px;
}
/* Cube */
.cube {
width: 120px;
height: 120px;
position: relative;
transform-style: preserve-3d;
animation: cubeRotateY 4s linear infinite;
}
/* All Faces */
.cube-face {
position: absolute;
width: 120px;
height: 120px;
opacity: 1;
backface-visibility: visible;
}
/* Individual Faces */
.cube-face--front { background: #ff6b6b; transform: translateZ(60px); }
.cube-face--back { background: #4ecdc4; transform: rotateY(180deg) translateZ(60px); }
.cube-face--left { background: #45b7d1; transform: rotateY(-90deg) translateZ(60px); }
.cube-face--right { background: #f9ca24; transform: rotateY(90deg) translateZ(60px); }
.cube-face--top { background: #6c5ce7; transform: rotateX(90deg) translateZ(60px); }
.cube-face--bottom { background: #a8e6cf; transform: rotateX(-90deg) translateZ(60px); }
</style>
</head>
<body>
<div class="cube-scene">
<div class="cube">
<div class="cube-face cube-face--front"></div>
<div class="cube-face cube-face--back"></div>
<div class="cube-face cube-face--left"></div>
<div class="cube-face cube-face--right"></div>
<div class="cube-face cube-face--top"></div>
<div class="cube-face cube-face--bottom"></div>
</div>
</div>
</body>
</html>เครื่องมือที่เกี่ยวข้อง
ดูเครื่องมือทั้งหมดCSS เฟล็กซ์บ็อกซ์ เครื่องกำเนิดเค้าโครง
สร้างเค้าโครง CSS Flexbox ด้วยสายตาพร้อมการแสดงตัวอย่างสด ปรับทิศทางแบบยืดหยุ่น ปรับเนื้อหา จัดเรียงรายการ และอื่นๆ ได้ฟรีและฝั่งไคลเอ็นต์
CSS กริด เครื่องกำเนิดเค้าโครง
สร้างเค้าโครง CSS Grid ด้วยสายตาพร้อมการแสดงตัวอย่างสด ปรับเทมเพลตตารางกริด คอลัมน์ แถว ช่องว่าง จัดเรียงรายการ จัดเรียงรายการ และอื่นๆ ได้ฟรีและฝั่งไคลเอ็นต์
การไล่ระดับสี CSS เครื่องกำเนิดไฟฟ้า
สร้างการไล่ระดับสี CSS ด้วยสายตาพร้อมการแสดงตัวอย่างสด สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยด้วยการหยุดสีแบบกำหนดเอง — ฟรีและฝั่งไคลเอ็นต์
CSSmorphism แก้ว เครื่องกำเนิดไฟฟ้า
สร้างเอฟเฟกต์การ์ด Glassmorphism ที่น่าทึ่งพร้อมการแสดงตัวอย่างแบบเรียลไทม์ ปรับแต่งความเบลอ ความทึบ และสีได้ทันที