HTML Code

All Tutorial

2D Transforms

CSS Transforms Playground

CSS Transforms Playground

CSS Transforms Playground

<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>CSS Transforms Playground</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
 
        #controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
        }
 
        .control-group {
            margin: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
 
        label {
            margin-bottom: 5px;
        }
 
        #preview-container {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #preview-box {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, border-radius 0.3s ease;
        }
 
        /* Animation styles */
        .animated {
            animation: colorChange 5s infinite alternate;
        }
 
    </style>
</head>
<body>
    <h1>CSS Transforms Playground</h1>
 
    <div id=”controls”>
        <div class=”control-group”>
            <label for=”transform-type”>Transform:</label>
            <select id=”transform-type”>
                <option value=”none”>None</option>
                <option value=”rotate”>Rotate</option>
                <option value=”scaleX”>Scale X</option>
                <option value=”scaleY”>Scale Y</option>
                <option value=”scale”>Scale</option>
                <option value=”skewX”>Skew X</option>
                <option value=”skewY”>Skew Y</option>
                <option value=”skew”>Skew</option>
                <option value=”matrix”>Matrix</option>
                <option value=”translate”>Translate</option>
            </select>
        </div>
 
        <div class=”control-group” id=”rotate-controls” style=”display: none;”>
            <label for=”rotate-value”>Rotate (deg):</label>
            <input type=”number” id=”rotate-value” value=”0″>
        </div>
 
        <div class=”control-group” id=”scale-controls” style=”display: none;”>
            <label for=”scale-x”>Scale X:</label>
            <input type=”number” id=”scale-x” value=”1″ step=”0.1″>
            <label for=”scale-y”>Scale Y:</label>
            <input type=”number” id=”scale-y” value=”1″ step=”0.1″>
        </div>
 
        <div class=”control-group” id=”skew-controls” style=”display: none;”>
            <label for=”skew-x”>Skew X (deg):</label>
            <input type=”number” id=”skew-x” value=”0″>
            <label for=”skew-y”>Skew Y (deg):</label>
            <input type=”number” id=”skew-y” value=”0″>
        </div>
 
         <div class=”control-group” id=”translate-controls” style=”display: none;”>
            <label for=”translate-x”>Translate X (px):</label>
            <input type=”number” id=”translate-x” value=”0″>
            <label for=”translate-y”>Translate Y (px):</label>
            <input type=”number” id=”translate-y” value=”0″>
        </div>
 
 
        <div class=”control-group” id=”matrix-controls” style=”display: none;”>
            <label for=”matrix-values”>Matrix Values (a, b, c, d, tx, ty):</label>
            <input type=”text” id=”matrix-values” value=”1, 0, 0, 1, 0, 0″>
        </div>
 
        <div class=”control-group”>
            <label for=”animation-toggle”>Animate Color:</label>
            <input type=”checkbox” id=”animation-toggle”>
        </div>
 
        <div class=”control-group”>
            <label for=”border-radius”>Border Radius:</label>
            <input type=”number” id=”border-radius” value=”0″ min=”0″ max=”100″>
        </div>
    </div>
 
    <div id=”preview-container”>
        <div id=”preview-box”></div>
    </div>
 
    <script>
        document.addEventListener(‘DOMContentLoaded’, () => {
            const transformTypeSelect = document.getElementById(‘transform-type’);
            const rotateControls = document.getElementById(‘rotate-controls’);
            const scaleControls = document.getElementById(‘scale-controls’);
            const skewControls = document.getElementById(‘skew-controls’);
            const matrixControls = document.getElementById(‘matrix-controls’);
        const translateControls = document.getElementById(‘translate-controls’);
            const rotateValueInput = document.getElementById(‘rotate-value’);
            const scaleXInput = document.getElementById(‘scale-x’);
            const scaleYInput = document.getElementById(‘scale-y’);
            const skewXInput = document.getElementById(‘skew-x’);
            const skewYInput = document.getElementById(‘skew-y’);
const translateXInput = document.getElementById(‘translate-x’);
            const translateYInput = document.getElementById(‘translate-y’);
            const matrixValuesInput = document.getElementById(‘matrix-values’);
            const previewBox = document.getElementById(‘preview-box’);
            const animationToggle = document.getElementById(‘animation-toggle’);
            const borderRadiusInput = document.getElementById(‘border-radius’);
 
            function updateTransform() {
                const transformType = transformTypeSelect.value;
                let transformValue = ”;
 
                switch (transformType) {
                    case ‘rotate’:
                        transformValue = `rotate(${rotateValueInput.value}deg)`;
                        break;
                    case ‘scaleX’:
                        transformValue = `scaleX(${scaleXInput.value})`;
                        break;
                    case ‘scaleY’:
                        transformValue = `scaleY(${scaleYInput.value})`;
                        break;
                    case ‘scale’:
                        transformValue = `scale(${scaleXInput.value}, ${scaleYInput.value})`;
                        break;
                    case ‘skewX’:
                        transformValue = `skewX(${skewXInput.value}deg)`;
                        break;
                    case ‘skewY’:
                        transformValue = `skewY(${skewYInput.value}deg)`;
                        break;
                    case ‘skew’:
                        transformValue = `skew(${skewXInput.value}deg, ${skewYInput.value}deg)`;
                        break;
                    case ‘matrix’:
                        transformValue = `matrix(${matrixValuesInput.value})`;
                        break;
case ‘translate’:
transformValue = `translate(${translateXInput.value}px, ${translateYInput.value}px)`;
break;
                    case ‘none’:
                    default:
                        transformValue = ‘none’;
                        break;
                }
 
                previewBox.style.transform = transformValue;
            }
 
            transformTypeSelect.addEventListener(‘change’, (event) => {
                rotateControls.style.display = ‘none’;
                scaleControls.style.display = ‘none’;
                skewControls.style.display = ‘none’;
                matrixControls.style.display = ‘none’;
translateControls.style.display = ‘none’;
 
 
                switch (event.target.value) {
                    case ‘rotate’:
                        rotateControls.style.display = ‘flex’;
                        break;
                    case ‘scaleX’:
                    case ‘scaleY’:
                    case ‘scale’:
                        scaleControls.style.display = ‘flex’;
                        break;
                    case ‘skewX’:
                    case ‘skewY’:
                    case ‘skew’:
                        skewControls.style.display = ‘flex’;
                        break;
                    case ‘matrix’:
                        matrixControls.style.display = ‘flex’;
                        break;
case ‘translate’:
translateControls.style.display = ‘flex’;
break;
                }
 
                updateTransform();
            });
 
            rotateValueInput.addEventListener(‘input’, updateTransform);
            scaleXInput.addEventListener(‘input’, updateTransform);
            scaleYInput.addEventListener(‘input’, updateTransform);
            skewXInput.addEventListener(‘input’, updateTransform);
            skewYInput.addEventListener(‘input’, updateTransform);
translateXInput.addEventListener(‘input’, updateTransform);
            translateYInput.addEventListener(‘input’, updateTransform);
            matrixValuesInput.addEventListener(‘input’, updateTransform);
 
            animationToggle.addEventListener(‘change’, (event) => {
                if (event.target.checked) {
                    previewBox.classList.add(‘animated’);
                } else {
                    previewBox.classList.remove(‘animated’);
                }
            });
 
            borderRadiusInput.addEventListener(‘input’, (event) => {
                previewBox.style.borderRadius = `${event.target.value}%`;
            });
        });
    </script>
</body>
</html>
< Previous
Scroll to Top