Δωρεάν μετατροπέας

3D CSS Cube Γεννήτρια

Δημιουργήστε τρισδιάστατα κινούμενα σχέδια κύβου CSS με προσαρμοσμένα χρώματα, μεγέθη και εφέ. Αντιγράψτε τον κώδικα HTML και CSS που δημιουργήθηκε αμέσως.

Μέγεθος κύβου120px

Γρήγορες προεπιλογές

Χρώματα προσώπου

ΕμπρόςΠίσωΑριστεράΣωστάΚορυφήΚάτω

Κινούμενα σχέδια

Ταχύτητα

Προοπτική800px

σύνορα

Πάχος: 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>

Σχετικά με αυτό το εργαλείο

Δημιουργήστε και προσαρμόστε περιεχόμενο με το Css3D Cube Generator απευθείας στο πρόγραμμα περιήγησής σας. Διαμορφώστε τις προτιμήσεις σας, δημιουργήστε την έξοδο και κατεβάστε ή αντιγράψτε το αποτέλεσμα. Όλα εκτελούνται από την πλευρά του πελάτη — τα δεδομένα σας παραμένουν ιδιωτικά και η επεξεργασία είναι άμεση.

Πώς να το χρησιμοποιήσετε

Διαμορφώστε τις ρυθμίσεις και τις επιλογές για να ταιριάζουν με τις απαιτήσεις σας.

Κάντε κλικ στο Δημιουργία για να δημιουργήσετε την έξοδο σας.

Κάντε προεπισκόπηση του αποτελέσματος και κάντε προσαρμογές εάν χρειάζεται.

Κάντε λήψη του αρχείου εξόδου ή αντιγράψτε το στο πρόχειρό σας.

Συχνές ερωτήσεις

Μπορώ να προσαρμόσω το παραγόμενο αποτέλεσμα;

Ναι. Το εργαλείο παρέχει διάφορες επιλογές προσαρμογής για να προσαρμόσει το αποτέλεσμα στις συγκεκριμένες ανάγκες σας. Προσαρμόστε τις ρυθμίσεις πριν από τη δημιουργία ή αναδημιουργήστε με διαφορετικές επιλογές.

Είναι το περιεχόμενο που δημιουργείται δωρεάν για χρήση;

Ναι. Όλα όσα δημιουργείτε με αυτό το εργαλείο είναι δικά σας για προσωπικούς, εκπαιδευτικούς ή εμπορικούς σκοπούς χωρίς περιορισμούς ή απαιτήσεις απόδοσης.

Αυτό απαιτεί λογαριασμό;

Όχι. Το εργαλείο είναι έτοιμο για χρήση αμέσως χωρίς εγγραφή, χωρίς email και χωρίς εγγραφή. Απλώς ανοίξτε τη σελίδα και ξεκινήστε τη δημιουργία.

Τα δεδομένα εισόδου μου διατηρούνται ιδιωτικά;

Ναι. Όλη η επεξεργασία πραγματοποιείται στο πρόγραμμα περιήγησής σας. Τα δεδομένα εισόδου και τα παραγόμενα αποτελέσματα δεν αποστέλλονται ποτέ σε κανέναν εξωτερικό διακομιστή.

3D CSS Cube Γεννήτρια

Σχετικά Εργαλεία

CSS Flexbox Γεννήτρια διάταξης

Πλέγμα CSS Γεννήτρια διάταξης

CSS Gradient Γεννήτρια

Γυαλομορφισμός CSS Γεννήτρια

Σχετικά με αυτό το εργαλείο

Πώς να το χρησιμοποιήσετε

Συχνές ερωτήσεις

Related Articles

Essential Developer Tools: JSON, Base64, RegEx, and More

Hashing, Encryption, and Encoding Explained: A Developer's Security Guide

Spreadsheet & Data Conversion Guide: Excel, CSV, JSON, and More

Why Browser-Based Tools Are the Future: No Installs, No Uploads, No Risk