3D Rotate CSS Generator Tool Source Code

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Rotate CSS Generator</title>
  <style>
    /* Resetting some default styles */
    body, html {
      margin: 0;
      padding: 0;
      font-family: 'Arial', sans-serif;
      height: 100%;
      background-color: #f4f7fb;
    }

/* Flexbox Layout */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 20px;
    }

h1 {
      color: #333;
      font-size: 28px;
      margin-bottom: 20px;
    }

.control-panel {
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 350px;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

.control-panel label {
      font-size: 14px;
      color: #555;
    }

.control-panel input[type="range"] {
      width: 100%;
    }

.control-panel span {
      font-size: 16px;
      color: #333;
    }

.cube-container {
      perspective: 1000px;
      width: 200px;
      height: 200px;
      margin-top: 30px;
    }

.cube {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transition: transform 1s ease;
    }

.face {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: rgba(255, 255, 255, 0.9);
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: #333;
      box-sizing: border-box;
    }

.front  { transform: translateZ(100px); background-color: #007bff; }
    .back   { transform: rotateY(180deg) translateZ(100px); background-color: #28a745; }
    .left   { transform: rotateY(-90deg) translateZ(100px); background-color: #ff5722; }
    .right  { transform: rotateY(90deg) translateZ(100px); background-color: #ffc107; }
    .top    { transform: rotateX(90deg) translateZ(100px); background-color: #e91e63; }
    .bottom { transform: rotateX(-90deg) translateZ(100px); background-color: #9c27b0; }

/* Styling for the code output */
    .generated-code {
      margin-top: 30px;
      background-color: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 600px;
    }

.generated-code label {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
    }

textarea {
      width: 100%;
      height: 200px;
      font-family: 'Courier New', Courier, monospace;
      font-size: 14px;
      padding: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      resize: vertical;
    }

.copy-btn {
      margin-top: 15px;
      padding: 12px 25px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }

.copy-btn:hover {
      background-color: #0056b3;
    }

/* Media Queries for Responsiveness */
    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }

.control-panel {
        max-width: 100%;
      }

h1 {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>

<div class="container">
    <h1>3D Rotate CSS Generator</h1>
    
    <div class="control-panel">
      <label for="rotateX">Rotate X:</label>
      <input type="range" id="rotateX" min="0" max="360" value="0">
      <span id="xValue">0°</span>

<label for="rotateY">Rotate Y:</label>
      <input type="range" id="rotateY" min="0" max="360" value="0">
      <span id="yValue">0°</span>

<label for="rotateZ">Rotate Z:</label>
      <input type="range" id="rotateZ" min="0" max="360" value="0">
      <span id="zValue">0°</span>
    </div>

<div class="cube-container">
      <div class="cube" id="cube">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face left">Left</div>
        <div class="face right">Right</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
      </div>
    </div>

<div class="generated-code">
      <label for="generatedCode">Generated HTML & CSS:</label>
      <textarea id="generatedCode" readonly></textarea>
      <button class="copy-btn" onclick="copyCode()">Copy Code</button>
    </div>
  </div>

rotateX.addEventListener('input', updateRotation);
    rotateY.addEventListener('input', updateRotation);
    rotateZ.addEventListener('input', updateRotation);

function updateRotation() {
      const x = rotateX.value;
      const y = rotateY.value;
      const z = rotateZ.value;

// Update the text displaying the rotation values
      xValue.textContent = `${x}°`;
      yValue.textContent = `${y}°`;
      zValue.textContent = `${z}°`;

// Apply the rotation to the cube
      cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`;

// Generate the code
      const generatedHTML = `
  <div class="cube-container">
    <div class="cube" style="transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face left">Left</div>
      <div class="face right">Right</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
  </div>
  `;

const generatedCSS = `
  .cube-container {
    perspective: 1000px;
    width: 200px;
    height: 200px;
  }

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg);
    transition: transform 1s ease;
  }

.face {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    box-sizing: border-box;
  }

.front  { transform: translateZ(100px); background-color: #007bff; }
  .back   { transform: rotateY(180deg) translateZ(100px); background-color: #28a745; }
  .left   { transform: rotateY(-90deg) translateZ(100px); background-color: #ff5722; }
  .right  { transform: rotateY(90deg) translateZ(100px); background-color: #ffc107; }
  .top    { transform: rotateX(90deg) translateZ(100px); background-color: #e91e63; }
  .bottom { transform: rotateX(-90deg) translateZ(100px); background-color: #9c27b0; }
  `;

// Output the generated code in the textarea
      generatedCodeTextarea.value = `HTML:\n${generatedHTML}\nCSS:\n<style>${generatedCSS}</style>`;
    }

function copyCode() {
      generatedCodeTextarea.select();
      document.execCommand('copy');
      alert('Code copied to clipboard!');
    }
  </script>

</body>
</html>

3D Rotate CSS Generator Tool Source Code

You may like these posts :

Write Your Comment