Khối CSS 3D Máy phát điện
Tạo hoạt ảnh khối CSS 3D với màu sắc, kích thước và hiệu ứng tùy chỉnh. Sao chép mã HTML và CSS được tạo ngay lập tức.
<!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>Công Cụ Liên Quan
Xem tất cả công cụCSS Flexbox Trình tạo bố cục
Tạo bố cục CSS Flexbox một cách trực quan với bản xem trước trực tiếp. Điều chỉnh hướng linh hoạt, căn chỉnh nội dung, căn chỉnh các mục, v.v. - miễn phí và phía khách hàng.
Lưới CSS Trình tạo bố cục
Tạo bố cục Lưới CSS một cách trực quan với bản xem trước trực tiếp. Điều chỉnh các cột, hàng, khoảng trống, căn chỉnh các mục, căn chỉnh các mục, v.v. - miễn phí và phía máy khách.
Độ dốc CSS Máy phát điện
Tạo độ dốc CSS một cách trực quan với bản xem trước trực tiếp. Tạo các gradient tuyến tính, xuyên tâm và hình nón với các điểm dừng màu tùy chỉnh - miễn phí và phía máy khách.
CSS thủy tinh Máy phát điện
Tạo hiệu ứng thẻ thủy tinh tuyệt đẹp với bản xem trước thời gian thực. Tùy chỉnh độ mờ, độ mờ và màu sắc ngay lập tức.