Membuat Aplikasi Transform CSS Generator dengan JavaScript

Membuat Aplikasi Transform CSS Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut ini adalah contoh kode untuk membuat aplikasi Transform CSS Generator menggunakan JavaScript. Aplikasi ini akan menghasilkan preview dan kode output yang dapat langsung disalin oleh pengguna. User interface aplikasi ini menggunakan Bootstrap untuk tampilan yang lebih menarik.

Transform CSS Generator

Transform CSS Generator

Pertama kita buat form menggunakan bootsrap

HTML

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transform CSS Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>
  <div class="container mt-5">
    <h1>Transform CSS Generator</h1>
    <div class="form-group">
      <label for="scale">Scale:</label>
      <input type="range" class="form-control-range" id="scale" min="0.5" max="2" step="0.1" value="1">
    </div>
    <div class="form-group">
      <label for="rotate">Rotate:</label>
      <input type="range" class="form-control-range" id="rotate" min="-180" max="180" step="10" value="0">
    </div>
    <div class="form-group">
      <label for="translateX">Translate X:</label>
      <input type="range" class="form-control-range" id="translateX" min="-100" max="100" step="10" value="0">
    </div>
    <div class="form-group">
      <label for="translateY">Translate Y:</label>
      <input type="range" class="form-control-range" id="translateY" min="-100" max="100" step="10" value="0">
    </div>
    <div class="form-group">
      <label for="skewX">Skew X:</label>
      <input type="range" class="form-control-range" id="skewX" min="-45" max="45" step="5" value="0">
    </div>
    <div class="form-group">
      <label for="skewY">Skew Y:</label>
      <input type="range" class="form-control-range" id="skewY" min="-45" max="45" step="5" value="0">
    </div>
    <div class="form-group">
      <label for="transformOrigin">Transform Origin:</label>
      <select class="form-control" id="transformOrigin">
        <option value="center">Center</option>
        <option value="top left">Top Left</option>
        <option value="top right">Top Right</option>
        <option value="bottom left">Bottom Left</option>
        <option value="bottom right">Bottom Right</option>
      </select>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" id="generateBtn">Generate CSS</button>
    </div>
    <div class="form-group">
      <label for="output">CSS Output:</label>
      <textarea class="form-control" id="output" rows="5" readonly></textarea>
    </div>
    <div id="preview"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>
HTML

CSS

CSS
.container {
      width: default;
      padding: 20px;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 30px;
    }

    #preview {
      width: 200px;
      height: 200px;
      background-color: #800000;
      transform-origin: center;
      transition: transform 0.3s ease;
    }
CSS

JavaScript

JavaScript
document.getElementById('generateBtn').addEventListener('click', function() {
  var scale = document.getElementById('scale').value;
  var rotate = document.getElementById('rotate').value;
  var translateX = document.getElementById('translateX').value;
  var translateY = document.getElementById('translateY').value;
  var skewX = document.getElementById('skewX').value;
  var skewY = document.getElementById('skewY').value;
  var transformOrigin = document.getElementById('transformOrigin').value;

  var css = `
    transform: scale(${scale});
    transform: rotate(${rotate}deg);
    transform: translateX(${translateX}px);
    transform: translateY(${translateY}px);
    transform: skewX(${skewX}deg);
    transform: skewY(${skewY}deg);
    transform-origin: ${transformOrigin};
  `;

  document.getElementById('output').value = css;
  document.getElementById('preview').style.cssText = css;
});
JavaScript

Silakan gunakan contoh kode di atas untuk membuat aplikasi Transform CSS Generator. Anda dapat menyesuaikan tampilan dan gaya sesuai kebutuhan Anda. Semoga berhasil!

Artikel Terbaru ⭐