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
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>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;
}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;
});Silakan gunakan contoh kode di atas untuk membuat aplikasi Transform CSS Generator. Anda dapat menyesuaikan tampilan dan gaya sesuai kebutuhan Anda. Semoga berhasil!
Leave a Reply