How To Create AN HTML5 Spinning Image CAPTCHA

Live stream set for 2025-09-29 at 14:00:00 Eastern

Ask questions in the live chat about any programming or lifestyle topic.

This livestream will be on YouTube or you can watch below.

Build a Simple Spinning Image CAPTCHA with HTML5 and JavaScript

Want to add a fun and user-friendly CAPTCHA to your website without relying on third-party services? In this beginner-level tutorial, we will walk through building a spinning image CAPTCHA using only HTML5, CSS, and JavaScript.

This type of CAPTCHA asks the user to rotate a small part of an image until it matches the background. It is simple, effective, and a great exercise if you are just starting to learn JavaScript and front-end development.

What You Will Build

We will create a CAPTCHA that:

• Displays a full background image
• Rotates a small “puzzle piece” of the image
• Lets the user rotate the piece using a button
• Validates the solution when the piece is aligned correctly

This project is great for learning about:

• HTML5 layout and image manipulation
• CSS positioning and transformations
• JavaScript event handling and logic

Code Walkthrough

Here is the full HTML5, CSS, and JavaScript code for your spinning image CAPTCHA. You can copy and paste this into an .html file and open it in your browser to test.

  <h2>Rotate the piece to complete the image</h2>

  <div id="captcha-container">
    <img id="main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/300px-Fronalpstock_big.jpg" alt="Main Image">
    <div id="rotated-piece"></div>
  </div>

  <br>
  <button id="rotate-btn">Rotate Piece</button>
  <button id="verify-btn">Verify</button>
  <div id="result"></div>

CSS For Styling

    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 40px;
      background-color: #f9f9f9;
    }

    #captcha-container {
      display: inline-block;
      position: relative;
      width: 300px;
      height: 200px;
      border: 2px solid #ccc;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
    }

    #main-image {
      width: 100%;
      height: 100%;
      display: block;
    }

    #rotated-piece {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 15px;
      left: 100px;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/300px-Fronalpstock_big.jpg');
      background-size: 300px 200px;
      background-position: -100px -50px;
      transform-origin: center center;
      transition: transform 0.3s ease;
      pointer-events: none;
    }

    #rotate-btn, #verify-btn {
      margin-top: 15px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

    #result {
      margin-top: 15px;
      font-weight: bold;
    }

JavaScript For Interactivity

    const rotatedPiece = document.getElementById('rotated-piece');
    const rotateBtn = document.getElementById('rotate-btn');
    const verifyBtn = document.getElementById('verify-btn');
    const resultDiv = document.getElementById('result');

    // Initial random rotation (90, 180, 270)
    let currentRotation = [90, 180, 270][Math.floor(Math.random() * 3)];
    rotatedPiece.style.transform = `rotate(${currentRotation}deg)`;

    rotateBtn.addEventListener('click', () => {
      currentRotation = (currentRotation + 90) % 360;
      rotatedPiece.style.transform = `rotate(${currentRotation}deg)`;
    });

    verifyBtn.addEventListener('click', () => {
      if (currentRotation === 0) {
        resultDiv.textContent = '✅ CAPTCHA passed!';
        resultDiv.style.color = 'green';
      } else {
        resultDiv.textContent = '❌ Incorrect. Try rotating again.';
        resultDiv.style.color = 'red';
      }
    });

Interactive Demo

Here’s a live example of the Stunning Gallery in action:

Want to Learn More?

If you are just getting started with JavaScript and want to build real-world projects like this, check out the following resources I created to help you level up:

Book:
Learning JavaScript on Amazon
A beginner-friendly guide with practical examples to help you master the fundamentals.

Course:
Learning JavaScript – Full Online Course
Interactive lessons and projects to build confidence through practice.

1-on-1 Programming Tutorials:
Need personalized help or mentorship? I am available for one-on-one sessions covering JavaScript, HTML5, and more.
Book a session here

Final Thoughts

Building a custom CAPTCHA like this not only improves your front-end skills but also helps you understand how visual feedback and interactivity work in real applications.

Try modifying the code to make the puzzle harder, or even use your own images for a personalized CAPTCHA experience.

Let me know in the comments how it worked for you, or what you would like to build next.