---
layout: default
title: Rotate Image - Rotate Images Any Angle
description: Rotate images 90°, 180°, 270°, or custom angles. Flip horizontally or vertically.
permalink: /playground/tools/rotate-image/
---

<link rel="stylesheet" href="../shared/tool-layout.css">

<div class="tool-wrapper">
    <div class="tool-breadcrumb">
        <a href="/playground/tools/">← Back to Tools</a>
    </div>

    <div class="tool-header">
        <h1>Rotate Image</h1>
        <p class="tool-description">Rotate and flip images with ease</p>
    </div>

    <div id="alert" class="alert"></div>

    <div class="tool-content">
        <div class="drop-zone" id="dropZone">
            <div class="drop-zone-icon">🖼️</div>
            <div class="drop-zone-text">Click to select an image or drag it here</div>
            <div class="drop-zone-hint">Supports JPG, PNG, GIF, WebP</div>
        </div>
        <input type="file" id="fileInput" class="file-input" accept="image/*">

        <div id="rotateControls" style="display: none; margin-top: 2rem;">
            <h3>Rotate & Flip</h3>
            <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; justify-content: center;">
                <button id="rotate90" class="btn btn-secondary">↻ 90°</button>
                <button id="rotate180" class="btn btn-secondary">↻ 180°</button>
                <button id="rotate270" class="btn btn-secondary">↻ 270°</button>
                <button id="flipH" class="btn btn-secondary">↔️ Flip Horizontal</button>
                <button id="flipV" class="btn btn-secondary">↕️ Flip Vertical</button>
                <button id="resetBtn" class="btn btn-secondary">🔄 Reset</button>
            </div>

            <div style="margin-top: 1.5rem;">
                <label for="customAngle" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">Custom Angle:</label>
                <input type="range" id="customAngle" min="0" max="360" value="0"
                       style="width: 100%; max-width: 400px;">
                <div style="margin-top: 0.5rem;">
                    <input type="number" id="angleValue" value="0" min="0" max="360"
                           style="padding: 0.5rem; border: 1px solid var(--tool-border); border-radius: 4px; width: 80px;">
                    <span style="margin-left: 0.5rem;">degrees</span>
                </div>
            </div>
        </div>

        <div id="previewContainer" style="display: none; margin-top: 2rem; text-align: center;">
            <h3>Preview</h3>
            <div style="margin-top: 1rem; border: 2px dashed var(--tool-border); padding: 1rem; border-radius: 8px; display: inline-block;">
                <canvas id="previewCanvas" style="max-width: 100%; height: auto;"></canvas>
            </div>
        </div>

        <div class="btn-group" style="margin-top: 2rem;">
            <button id="clearBtn" class="btn btn-secondary" style="display: none;">
                Clear
            </button>
            <button id="downloadBtn" class="btn btn-success" style="display: none;">
                Download Rotated Image
            </button>
        </div>
    </div>

    <div class="feature-list">
        <h3>Features</h3>
        <ul>
            <li>Rotate by 90°, 180°, 270° instantly</li>
            <li>Custom angle rotation (0-360°)</li>
            <li>Flip horizontally or vertically</li>
            <li>Real-time preview</li>
            <li>High-quality output</li>
            <li>100% client-side processing</li>
            <li>No file uploads - complete privacy</li>
            <li>Works offline</li>
        </ul>
    </div>
</div>

<script src="../shared/tool-utils.js"></script>
<script src="tool.js"></script>