Start trial
PricingContact Us
Log InStart For Free

Guide to image rotation: HTML, CSS, and JavaScript techniques

July 13th, 2023

4 min read

The rotation process shown in isometric view depicting the image rotation process

Written by

Joe Robinson


Content Marketing & Design

Animating background images can be surprisingly helpful for website design because background image rotation can measurably change a website's appearance and make it more interesting – especially if the image is a visually striking symbol or pattern. This kind of background image rotation can take time and focus to configure, which not everyone has readily available. However, knowing how to rotate images quickly, using efficient techniques, means you can have background image rotation (or any image rotation) with very little delay.

Having  the right content creation tools on-hand (like a WYSIWYG known for ease of implementation) makes image rotation a minutes-long job rather than hours-long. With TinyMCE, you can quickly implement image rotation, so let's get started.

Image rotation is available as part of TinyMCE’s Enhanced Image Editing plugin. By making use of the plugin, or TinyMCE’s useful APIs, you only need one or two lines of JavaScript, CSS, or HTML to complete your image rotation requirements.

Understanding image rotation

In web design, the concept of background image rotation means that images don’t always need to be the right way up. While it’s wise to keep photos the right way up (respect what the photographer intended), when an image is symbolic or the rotation happens in the context of animation, then the real value of image rotation becomes clear. 

Rotating or spinning an image provides something small (and fun) that can make your design stand out. And in a crowded market, standing out is now an obligatory part of being successful. The following sections explain how to rotate images with different CSS, HTML, and JavaScript techniques.

Rotating images in TinyMCE

TinyMCE’s Enhanced Image Editing (Premium) plugin has the capacity to rotate images as  part of the Enhanced Image Editing plugin toolbar. When you select an image, the option to rotate an image 90 degrees to the left or right appears in a button on the toolbar (that's just  one way that TInyMCE provides a familiar interface for content creators.)

In addition to the toolbar, image rotation with TinyMCE doesn’t have to happen manually. You can make use of the commands available to dynamically change the image rotation:


This command rotates a selected image to the right independently of pressing the toolbar button. It’s included in the guide on using the TinyMCE execCommand API.

How to rotate images in HTML

Image rotation with HTML is possible with specific attributes added to the img tag. You can do this with static HTML by adding transform attributes directly to the image tag. Within TinyMCE, you can also make use of the available API methods to dynamically set the attributes of images.

Include DOMUtils methods to select the image element and adjust the attributes:

setup: (editor) => {
  editor.on("keydown", (e) => {
      "transform: rotate(90deg);"

This setup function rotates an image when there’s a keydown event in the editor:

The keydown event adjusting the image rotation

How to rotate an image in CSS

To rotate images with CSS, the rotate properties can be set up inside a class, for example, and added to the image element. For example, the following class contains CSS to transform the image element, rotating it 180 degrees:

.spin {
  transform: rotate(180deg);

In TinyMCE, you can apply CSS to rotate images, like in the example above, by making use of TinyMCE’s DOMUtils methods:

setup: (editor) => {
        editor.on("focus", function () {
            editor.dom.addClass("img"), "spin");

content_style: `
        .spin {
          transform: rotate(180deg);

On focus, this JavaScript sets the CSS style of the image dynamically.

Image rotation working in the browser

Rotating images with JavaScript

The previous examples have demonstrated how you can use JavaScript within the TinyMCE init script to select the image elements, and set the HTML attributes, or set the CSS class to rotate the image.

You can rotate the image with JavaScript outside the TinyMCE init script by setting up a script outside of the TinyMCE init script, and making use of JavaScript to change the style of the img HTML tag (changing it to rotate the image element).

This button and associated function are configured to listen for a button click event, and will then rotate the image with JavaScript:

    function imageRR() {
        var rotate = tinymce.activeEditor.dom.get('image0A'); = 'rotate(90deg)';

    var buttonFonts0 = document.getElementById("button0");
        buttonFonts0.addEventListener("click", imageRR, false);

NOTE: The TinyMCE DOMUtil API method get() needs an id to work. The image in the demo has been assigned the id image0A for the demo to work.

The image rotation working in the browser with the configuration

Image rotation best practices

CSS for image rotation can be done in multiple ways, but if your plan for image rotation is rotation along the X, Y, and Z axis, an efficient syntax makes use of the rotate3d property. This property includes variables for rotation along each axis:

img {
  transform: rotate3d(1, 1, 1, 70deg);

If you need to, you can also make use of the rotate property on its own, without the transform part of the CSS syntax. You also don’t have to use only degrees to rotate an image. The property accepts gradians, radians, or event turns.

Final thoughts on image rotation in TinyMCE

The techniques explained in this post represent a small starting point for image rotation. Using the CSS properties you can add to your design, there are further directions that you can take image rotation to fit your use case or business needs, or to better represent your brand.

Some other articles to check on for CSS design and image management as next steps are The guide on alt text best practices, and making use of 3D effects for your text design.

If you have any questions on how TinyMCE Enhanced Image Editing (Premium) plugin can support your content development, contact us to find out more.

byJoe Robinson

Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.

Related Articles

  • Content Marketing & DesignMay 1st, 2024

    Build branding into your product design with a WYSIWYG HTML editor

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge


© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.