Mchemraba wa 3D CSS Jenereta
Tengeneza uhuishaji wa mchemraba wa 3D CSS na rangi maalum, saizi na madoido. Nakili msimbo wa HTML na CSS uliozalishwa papo hapo.
<!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>Zana Zinazohusiana
Angalia zana zoteCSS Flexbox Jenereta ya Mpangilio
Tengeneza mipangilio ya CSS Flexbox kwa kuibua na hakikisho la moja kwa moja. Rekebisha mwelekeo-mwelekeo, thibitisha-maudhui, panga-vipengee, na zaidi - bila malipo na upande wa mteja.
Gridi ya CSS Jenereta ya Mpangilio
Tengeneza mipangilio ya Gridi ya CSS kwa macho na hakikisho la moja kwa moja. Rekebisha safu wima za kiolezo cha gridi, safu, pengo, thibitisha-vipengee, panga-vipengee na zaidi - bila malipo na upande wa mteja.
Gradient ya CSS Jenereta
Tengeneza gradient za CSS kwa macho kwa onyesho la moja kwa moja. Unda mikunjo ya mstari, radial na laini kwa kutumia vituo maalum vya rangi - bila malipo na upande wa mteja.
Glassmorphism CSS Jenereta
Unda athari nzuri za kadi za glasi na hakiki ya wakati halisi. Geuza ukungu, uwazi na rangi upendavyo papo hapo.